центр выравнивания изображения

Question

Как центрировать выравнивание изображения по вертикали и по горизонтали в div.

Мне нужно получить это без фиксации высоты или заполнения, поскольку размеры изображения не постоянны, поэтому они должны быть гибкими со всеми изображениями.

Вот мой след http://jsfiddle.net/yHdAx/2/

Answer 1

Эй теперь вы можете использовать для table-cell свойств в вашем DIV, как как этот

живая демонстрацияhttp://jsfiddle.net/yHdAx/3/

HTML

<div style="height:800px; background-color:#CCC"> 
<div class="test"> 
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" /> 
</div> 

Css

.test{ 
background-color:red; 
height:600px; display:table-cell; vertical-align:middle; 
    text-align:center; 
} 
.test img{ 
max-width:50%; 

} 

подробнее http://www.brunildo.org/test/img_center.html

Answer 2

Для выравнивания по центру изображения, вы должны установить это дисплей блокировать, а затем левый и правый края к авто. Я также сделал это с верхним и нижним полями в новом примере кода. Вот код, который требуется, чтобы сделать эту работу:

CSS

.test { 
    background-color:#999; 
    height:60%; 
    display:block; 
    vertical-align:middle; 
    padding-top: 25%; 
    padding-botton: 25%; 
} 

.test img { 
    max-width:50%; 
    vertical-align: ; 
    display: block; 
    margin: auto auto auto auto; 
} 

HTML

<div style="height:800px; background-color:#CCC"> 
    <div class="test"> 
     <img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" /> 
    </div> 
</div> 

Answer 3

Применить display:block к изображению и установите его поля в auto.

.test { 
    background-color:#999; 
    padding: 50px 0; 
} 

.test img { 
    display: block; 
    margin: auto; 
} 

Вот скрипка, http://jsfiddle.net/yHdAx/5/

Answer 4

Что делать, если вы не установите высоту на содержащей DIV, будет перерыв DESIG тогда?

Для центрирования изображения просто использовать

.test img { 
    display:block; 
    width:25%; 
    margin:0 auto; 
} 

Answer 5

я пытался играть только с одним DIV

div { 
    display:table-cell; 
    background:red; 
    width:500px; 
    height:500px; 
    vertical-align:middle; 
    text-align:center; 
} 

Я надеюсь, что это также поможет вам: - http://jsbin.com/ihunuq/3/edit

Answer 6

Вы можете использовать позицию : абсолютный. Что-то вроде этого: jsfiddle.

.test{ 
    background-color:#999; 
    height:60%; 
    width: 100%; 
    position: relative; 
} 
.test img{ 
    max-width:50%; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
}