БлогNot. HTML: как правильно центрировать текст и картинку в разделе

HTML: как правильно центрировать текст и картинку в разделе

Средний web-мастер, когда ему нужно чего-нибудь центрировать на страничке (по горизонтали), обычно умеет это:

<div align="center">чего-нибудь</div>

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

Меж тем, всё довольно просто, и даже без привлечения нестандартных для HTML5 атрибутов вроде того же align.

Если речь конкретно о тексте и картинке, выровненных по центру родительского раздела, который тоже хочет равняться по центру, то вот так (код с картинкой и текстом, на данный момент валидный):

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Center</title>
 </head>
<body>

<div style="background-color: lightgray; width: 80%; margin: 0 auto; text-align: center;">
<p>
 Какой-то <span style="font-size: 5">Текст</span>
 <img src="1.gif" style="margin: 0 auto;vertical-align:middle;" alt="Картинко">
</p>
</div>

</body></html>
1.gif
1.gif
скриншот этого кода
скриншот этого кода

Как будет время, постараюсь позанудствовать поподробней на тему новых веяний в выравнивании элементов HTML без align="чото" и подобных анахронизмов :)

21.05.2016, 23:38 [6036 просмотров]


теги: html css

К этой статье пока нет комментариев, Ваш будет первым