Как можно центрировать выравнивание моего изображения в div?

Question

У меня есть div, предназначенный для содержания всего контента на указанном сайте, изображение, которое я вложил в div, не хочет сосредотачиваться, и я не уверен, почему?

вот CSS.

#wrapper { 
width: 1000px; 
margin: 0 auto; 
background-color: #f4f9f1; 
} 

#intro { 
padding-bottom: 10px; 
width:80%; 
margin:10px auto; 
border-bottom: 3px solid #b32230; 
} 

интро идентификатор дается сказал IMG, он просто плавает в левой части DIV (идентификатор обертка), а также не центр, даже если я правый и левый края в автоматический режим?

Answer 1

Проблема margin: auto; в том, что она будет только на уровне центра блока элементов ... и img по умолчанию отображается как inline и следует поток текста (слева). Если добавить display: block к нему, он должен работать:

DEMO

#intro { 
    display: block; 
    padding-bottom: 10px; 
    width:80%; 
    margin:10px auto; 
    border-bottom: 3px solid #b32230; 
} 

Таким образом, вам не нужно централизованно согласовать текст элемента обертки.

Но если вы хотите, чтобы сосредоточить все inline детей из обертки - просто использовать text-align:center на #wrapper ... Однако то, возможно, придется иметь разрывы строк до и после того, как изображение, или какой-то текст может закончиться рядом к ним и вытолкнуть их из центра =)

DEMO

Answer 2

Использование text-align: center на главном контейнере:

#wrapper { 
    width: 1000px; 
    margin: 0 auto; 
    background-color: #f4f9f1; 
    text-align: center;/*Add text-align center*/ 
}