Skip to content


Как отцентрировать DIV по вертикали

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css" media="screen"><!--
  5. #horizon {
  6.   color: white;
  7.   background-color: #0ff;
  8.   text-align: center;
  9.   position: absolute;
  10.   top: 50%;
  11.   left: 0px;
  12.   width: 100%;
  13.   height: 1px;
  14.   visibility: hidden;
  15.   display: block
  16.   }
  17. #content {
  18.   background-color: #f00;
  19.   margin-left: -247px;
  20.   position: absolute;
  21.   top: -187px;
  22.   left: 50%;
  23.   width: 495px;
  24.   height: 375px;
  25.   visibility: visible
  26.   }
  27. -->
  28. </style>
  29. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  30. </head>
  31. <body>
  32. <div id="horizon">
  33.   <div id="content">
  34.     Этот блок отцентрирован по вертикали
  35.   </div>
  36. </div>
  37. </body>
  38. </html>

Результат:

Выравнивание по вертикали с помощью CSS

CSS: как отцентрировать по вертикали

Размещено в категории Веб-приложения.

Комментариев: 0

Чтобы быть всегда в курсе здесь происходящего, Вы можете подписаться на RSS feed для комментариев на эту заметку.

Some HTML is OK

(required)

(required, but never shared)

, или ответить через trackback.

Страница 1 из 11