Vertical-align работает в <div></div> ?

Oleh · March 13, 2012

Как отцентровать по вертикали текст в <div></div> или в <p></p> ?

По горизонтали получается с помощью text-align: center;

В описании (http://htmlbook.ru/css/vertical-align) написано, что "middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента." Я задал ширину и высоту для контейнера. То по идее к центральной точке текста или изображения должна добавляться половина высоты контейнера от верхней его границы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

  <title></title>

  <style type="text/css">

  #cont1 { width: 500px; height: 300px; border: 1px solid black; }
  #cont1 span { vertical-align: middle; }

  </style>

  <script type="text/javascript">
  </script>
</head>

<body>

<div id="cont1">
<span>Текст</span>
</div>

</body>

</html>

(Прошёл книгу по HTML и CSS. Начал учить JavaScript - забыл многое из HTML и CSS.)

dostel1 · March 13, 2012

Заюзай поиск по сайту!Тема уже задавалась.

Можно использовать display:table-cell а для ие есть expression

fishki · March 13, 2012

Как отцентровать по вертикали текст в <div></div> или в <p></p> ?
По горизонтали получается с помощью text-align: center;
В описании (http://htmlbook.ru/css/vertical-align) написано, что "middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента." Я задал ширину и высоту для контейнера. То по идее к центральной точке текста или изображения должна добавляться половина высоты контейнера от верхней его границы.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

  <title></title>

  <style type="text/css">

  #cont1 { width: 500px; height: 300px; border: 1px solid black; }
  #cont1 span { vertical-align: middle; }

  </style>

  <script type="text/javascript">
  </script>
</head>

<body>

<div id="cont1">
<span>Текст</span>
</div>

</body>

</html>
(Прошёл книгу по HTML и CSS. Начал учить JavaScript - забыл многое из HTML и CSS.)

Используйте: #cont1 span { line-height: 300px; }

Sign In

Vertical-align работает в <div></div> ?

Question

Oleh

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

dostel1

Link to comment

Share on other sites

fishki

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information