Как центрировать изображения на веб-странице для всех размеров экрана - PullRequest
Новая
       45

Как центрировать изображения на веб-странице для всех размеров экрана

29 голосов
/ 05 мая 2011

У меня проблема с моим HTML.Я искал по всему интернету, но все еще не получил реального ответа.

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

Вот сайт ;если вы находитесь на 13,5-дюймовом экране, он будет посередине.

Ответы [ 4 ]

76 голосов
/ 05 мая 2011

Попробуйте что-то вроде этого ... 

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>
31 голосов
/ 05 мая 2011

Разве не допустимо использовать простой тег <center></center>?

Я должен что-то здесь упустить, если нет. Не стесняйтесь объяснить, почему в комментарии. Я люблю веб-дизайн, и ваш сайт очень впечатляет. Я мог бы предложить сделать что-то, чтобы уменьшить время загрузки, это немного выключить.

- От одного вентилятора MC к другому:)

EDIT

Я только что посмотрел на твой код ... ой! 

<center></center> 

<center><body onload="MM_preloadImages('../logo-glow.png')"> 
<a href="homepage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('minecraft2','','../logo-glow.png',1)"><img src="../log-noglow.png" name="minecraft2" width="998" height="222" hspace="0" border="0" align="absmiddle" id="minecraft2" /></a></body></center>

Старайтесь не размещать теги форматирования вне тела. Поместите <center> внутри тега body. Он работает, потому что он следует строгим правилам HTML низкого уровня, однако не все браузеры такие хорошие, и некоторые могут отображать вашу страницу неправильно, если эта проблема не будет исправлена!

9 голосов
/ 05 мая 2011

В вашем конкретном случае вы можете установить содержащий элемент a следующим образом: 

a {
    display: block;
    text-align: center;
}

JS Bin demo .

7 голосов
/ 14 ноября 2012 
<div style='width:200px;margin:0 auto;> sometext or image tag</div>

это работает горизонтально

...