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
скриншот этого кода
Как будет время, постараюсь позанудствовать поподробней на тему новых веяний в выравнивании элементов HTML без align="чото" и подобных анахронизмов :)
21.05.2016, 23:38 [6135 просмотров]