Как разместить изображение в центре/середине как по вертикали, так и по горизонтали

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>

Как я могу сделать изображение, начиная с середины этого окна? (средний и вертикальный и горизонтальный)

Ответ 1

Существует несколько способов сделать это, и если это необходимо для работы во всех браузерах (IE7 + и остальное), вам нужно сделать разные вещи, чтобы заставить его работать в некоторых случаях.

Используйте абсолютную позицию. Это работает, только если вы знаете размер изображения. Здесь вы устанавливаете его на position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.

См. пример здесь: http://jsfiddle.net/JPch8/
Используйте margin: 0 auto;text-align: center; и line-height/font-size. Это немного сложнее, так как высота строки не работает, как это должно быть в IE для элементов встроенного блока, таких как изображения. Это где размер шрифта входит. В основном, вы устанавливаете высоту линии изображения в контейнере так же, как высота контейнера. Это будет вертикально выровнять встроенные элементы, но в IE вам нужно установить размер шрифта, чтобы он работал.

См. пример здесь: http://jsfiddle.net/JPch8/2/
В современных браузерах, поддерживающих display: flex, вы можете сделать это, просто установив div контейнера на display: flex; align-items: center; justify-content: center;

См. пример здесь: https://jsfiddle.net/ptz9k3th/

Ответ 2

"float:left; position:relative", вероятно, не работает должным образом. Плавающие элементы считаются абсолютными.

Чтобы получить изображение по вертикали, вам нужна высота на div, и вам нужна высота на нем. (Центрирование по вертикали - это боль). Мой пример ниже будет работать, если это ваши единственные элементы, но имейте в виду, что height: 100% в контейнерах, скорее всего, повлияет на остальную часть вашего макета.

<html>
<head><title></title>
<style type="text/css">
html, body { 
     height: 100%;
}

#photo_leftPanel {
     height: 500px; /*guessing*/
     width: 604px;
     float: left;
}

#photo_leftPanel img {
     margin: auto;
     vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>

Ответ 3

поместите изображение в <div> с помощью text-align:center; без указания размера окна

<div class="picture_div" style="margin:0px auto; text-align:center;">
     <img src="media/BezierCurve.gif" />
</div>

в качестве альтернативы вы можете указать width и height в поле <div>, чтобы центрировать изображение (на самом деле это поле div).

<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
    <img src="media/BezierCurve.gif" />
</div>

Ответ 4

Надеюсь, я понимаю, чего вы пытаетесь достичь.

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>