Центрирование по горизонтали и вертикали

vla · 24.02.2012

Хочу предложить простейшую, на первый взгляд, задачу:

Центрирование блока по горизонтали и вертикали в родительском элементе

На примере двух блочных элементов (изображение <img> и блока <div> с обводкой в 3 пикселя) предлагаю решить проблему центрирования. Картинку сделать фоном - не вариант, тк <img> - это просто частный случай блочного элемента.

Cхематично нарисовал конечный результат (смотри прикрепленный файл "illustration.jpg")
Прикрепляю изображение, для удобства (смотри прикрепленный файл "img.gif")

! Обратите внимение, что размеры блока задана в относительных единицах - em, а размеры картинки фиксированы - px.

Просматривая темы форума, периодически встречал неясность в вопросах расположения элемента по центру, напр в этой теме: "Как выровнять по центру?". Сам, тоже, не могу сказать однозначно какой способ лучше. Поэтому решил создать данную тему, по аналогии созданных пользователем [member=BaNru]: "спойлер" и "ячейки".

Надеюсь на помощь в поиске возможных вариантов и выбора лучшего решения (или лучших решений)!

lekzd · 24.02.2012

Есть старый беспроигрышный вариант с ячейкой таблицы (по умолчанию внутри нее все выравнивается по центру вертикали + стилями можно добавить выравнивание по горизонтали)

A-F · 24.02.2012

Абсолюьным позиционированием Div, а картинку внутри можно и обычным отступом, так как известны размеры

vla · 24.02.2012

[member=lekzd], ваш способ очень понравился - на самом деле непробиваемый!

Продемонстрирую для всех:

Смысл способа от [member=lekzd] заключается в особенности ячейки таблицы - содержимое в ней всегда выравнивается по вертикали по середине

Я сделал пример с таблицей - смотри прикрепленный файл lekzd.zip и код под спойлером

Код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>MAXIMUM, способ от пользователя "lekzd"</title>
<style>
*{margin:0;padding:0;}
body{padding:2%;}
#img0{width:50px;height:50px;}
#table0 td{width:4em;height:4em;border:3px solid #000;text-align:center;}
</style>
</head>

<body>
<table id="table0">
<tr>
<td>
<img id="img0" src="img.gif" alt="" title="">
</td>
</tr>
</table>
</body>
</html>

A-F сказал(а):
Абсолюьным позиционированием Div, а картинку внутри можно и обычным отступом, так как известны размеры

[member=A-F], если посмотреть внимательно на задачу - вы не сможете определить размеры отступов, тк ширина блока задана в em, а эта величина зависит от настроек браузера пользователя. А, про "Абсолютное позиционирование" - ваще не понял...
Надеюсь, у вас будет минутка продемонстрировать свой вариант!

tigra60 · 24.02.2012

Я сделал пример с таблицей

Фи! А как же быть с семантикой кода? Кто помешал сделать хотя бы так

vla · 24.02.2012

Если мои мысли совпадают с мыслями [member=tigra60], то я думаю в нужном направлении! Это радует

Я продемонстрировал вариант пользователя [member=lekzd], и как раз собирался сделать по аналогии через display:table-sell;. Главное, что [member=lekzd], акцентировал особенность ячейки выравнивать вертикально по центру.

[member=tigra60], могли бы вы привести в этой теме пример с хаком для факин-IE? Я помню вы говорили о хаках для inline-block и table-sell в одной из тем, но я не догадался тогда ее взять на заметку, а теперь не могу найти...

tigra60 · 24.02.2012

пример с хаком для факин-IE

Посмотреть вложение valign.zip

Внимание! Прежде, чем посмотреть пример в ИЕ6, откройте index.html в редакторе и скорректируйте путь к файлу display-table.min.htc. Путь должен начинаться слешем (/) и идти от корня диска (букву диска писать не нужно).
Например, если вы распаковали архив в корень диска D, то у вас путь к HTC файлу будет
/valign/display-table.min.htc
и менять ничего не нужно. Если же вы распаковали архив, например в папку examples диска С, то тогда путь к HTC файлу у вас будет
/examples/valign/display-table.min.htc
и этот путь нужно будет прописать в URL стиля behavior для BODY (1-я строчка стилей)

Подробнее об этом HTC скрипте читайте у Марата Таналина. Огромное ему спасибо и респектище!

BaNru · 25.02.2012

Есть более простой и старый вариант
http://jsfiddle.net/BaNru/hB4ak/
Но, к сожалению, он не будет работать в ИЕ6, т.к. как это старый и досадный баг осла - не умение выравнивать вертикально картинки, точнее, некий сброс высоты строки при помещение в строку картинки.
Для этого самый распространенный совет - использовать margin-top для осла.
Также для осла можно воспользоваться expression, но не будем о плохом, ибо это верный способ убить браузер. Не будем издеваться над пользователями, как они над нами.

Так же этот способ дает один неприятный момент в FF и Хроме. Если в примере Тигры идет смещение на 1px вверх, то в моем примере, смещение картинки идет на несколько пикселей вниз.

Т.к. нам известны размеры картинки, то будет лучше использовать другой способ центрирования
http://jsfiddle.net/BaNru/hB4ak/1/
Данный пример работает без проблем во всех браузерах. И не надо никаких велосипедов с таблицами.

Центрирование по горизонтали и вертикали

vla

Well-Known Member

Вложения

lekzd

parse error: parse error, unexpected T_STRING...

A-F

Well-Known Member

vla

Well-Known Member

Вложения

tigra60

Спасатель

vla

Well-Known Member

tigra60

Спасатель

BaNru

Пацифизжу

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей