центр блока, в котором он применяется дисплей встроенного блока

У меня есть div, который содержит img, теперь я бы центрировал его, но если я попробую margin: 0 auto, это не сработает.центр блока, в котором он применяется дисплей встроенного блока

<div style="display: inline-block"> 

    <img src=""/> 

</div>

Как я могу сосредоточить весь div, включая также img?

источник

2012-02-22 eng_mazzy

Если DIV не имеет динамической ширины. Затем определите ширину для DIV, потому что margin: 0 auto; работает только на фиксированной ширине – sandeep

Добавить text-align: center в контейнер DIV:

<div style="text-align: center"> 
    <div style="display: inline-block"> 
     <img src="..."/> 
    </div> 
</div>

DEMO

источник

2012-02-22 09:56:27

Хорошо работает, но я не понимаю, почему ... Я имею в виду, в div у меня нет текста только img ... это свойство используется только для текста? –

Ну, это свойство указывает, как выравнивается ** встроенный контент ** блока. Таким образом, он работает для текста и других встроенных элементов. Это имеет место в вашем примере, потому что содержащий div является 'inline-block'. –

просто дает text-align: center родителю вашего рядный блок DIV

см fiddle

Может быть, вы уже знаете, но учтите, что это не будет работать везде, потому что IE < 8 не будет применяться к display: inline-block ваш <div> элемент (и не хак не может помочь вам): от quirksmode

IE 6/7 принимает значение только на элементах с естественным дисплеем: рядный.

Поэтому я предлагаю использовать другой элемент (например, простой рядный <span>) или, если вы используете HTML5, выбрать один из новых доступных элементов: поскольку они не распознаются на старом браузере IE вы можете стиль их инлайн блоков без проблем. В этом случае может быть подходящим элемент <figure>.

источник

2012-02-22 09:54:56 fcalderan

Если вы хотите отцентрировать изображение внутри вашей INLINE-BLOCK DIV, то вам необходимо назначить следующий стайлинг для ваших img tag

position:relative; 
left: 50%;  
margin-left: -57px; /*Negative half of the width of the image */

Это демо. http://jsfiddle.net/5eU3Y/

НО, если вы хотите использовать CENTER div, вам необходимо назначить text-align контейнера: center; имущество. Проверьте этот пример http://jsfiddle.net/5eU3Y/1/

Но если вы хотите CENTER ТОЛЬКО этот блок inline-div, вы должны знать его ширину. Проверьте это. http://jsfiddle.net/5eU3Y/2/

источник

2012-02-22 10:20:11

центр блока, в котором он применяется дисплей встроенного блока

ответ

Смежные вопросы