Центр изображения выравнивается по вертикали и по горизонтали

Привет, я хочу разместить изображение, которое выравнивается по центру как по вертикали, так и по горизонтали, Моя разметка HTML

<ul class="big-wrapper">
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
    <img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">
</div>
</li>
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
    <img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">

</li>
</ul>

Used Css
ul.big-wrapper li > div {
height:612px;
width:612px;
}

ul.big-wrappe li {
float:left;
margin:0 20px 20px 0;
position:relative;
text-align:center;
}

После выполнения всех этих вещей я не могу этого сделать. Пожалуйста, посмотрите и помогите мне.

Ответы

Ответ 1

Есть несколько хороших способов как для горизонтального, так и для вертикального центрирования элемента, это просто сводится к ситуации и вашим предпочтениям.

Со следующей разметкой:

<div><img src="a.png" width="100" height="100"></div>

высота строки

div { width:300px; height:300px; line-height:300px; text-align:center; }
div img { vertical-align:middle; }

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

дисплей: таблица-клеток

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

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

позиция: абсолютные

div { width:300px; height:300px; position:relative; }
div img { top:-50px; left:-50px; position:absolute; margin:50% 0 0 50%; }

top и left смещения должны быть установлены на половину соответствующих размеров расположенного элемента. Хорошо работает, если содержащий элемент должен быть гибким, но для работы требуются абсолютные значения.

Демо всех методов: jsfiddle.net/Marcel/JQbea (fullscreen)

Ответ 2

Почему бы просто не удалить теги img, а затем установить изображение как background и центрировать его так:

(делать это inline, но через внешний файл css - лучший способ)

<div style="background: url('7-612x612-2.png') no-repeat center center transparent;">&nbsp;</div>