Должен центрировать изображение в веб-странице с помощью CSS
Я хотел бы центрировать изображение на странице и вертикально и горизонтально даже когда браузер изменен.
В настоящее время я использую этот CSS:
.centeredImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}
И этот HTML:
<img class="centeredImage" src="images/logo.png">
Это центрируется в FF, но не IE (центр изображения помещается в левый верхний угол). Какие-либо идеи?
- Робот
5 ответов
Если предоставленные ответы не работают и / или несовместимы в каждом браузере, вы можете попробовать это:
http://andreaslagerkvist.com/jquery/center/
text-align:center;
Должен получить, хотя .
IE имеет проблемы с position: fixed (наряду с миллионом других вещей), так что я бы не советовал этого делать, если совместимость важна.
Используйте position: absolute, если контейнер не должен прокручиваться. В противном случае вам понадобится js для регулировки верхней и левой части изображения при прокрутке.
text-align: center должен работать, если применяется к контейнеру изображения, но не к самому изображению. Но, конечно, это касается только горизонтали, а не вертикали. vertical-align: middle не работает у меня, даже при достаточно большом контейнере.
Auto margins не работает в IE, по крайней мере, когда я тестирую.