Практическое решение для центрирования по вертикали и горизонтали в HTML, которое работает в FF, IE6 и IE7 - PullRequest
Новая
       37

Практическое решение для центрирования по вертикали и горизонтали в HTML, которое работает в FF, IE6 и IE7

4 голосов
/ 08 сентября 2008

Каким может быть практическое решение для центрирования по вертикали и горизонтали контента в HTML, которое работает в Firefox, IE6 и IE7?

Некоторые детали:

  • Я ищу решение для всей страницы.

  • Вам нужно указать только ширину центрируемого элемента. Высота элемента не известна во время проектирования.

  • При сворачивании окна прокрутка должна появляться только тогда, когда все пустое пространство исчезло. Другими словами, ширина экрана должна быть представлена ​​как:

"leftSpace width = (screenWidth-widthOfCenteredElement) / 2" +
"centeredElement width = widthOfCenteredElement" +
"rightSpace width = (screenWidth-widthOfCenteredElement) / 2"

И то же самое для высоты:

"topSpace height = (screenHeight-heightOfCenteredElement) / 2" +
"centeredElement height = heightOfCenteredElement" +
"bottomSpace height = (screenWidth-heightOfCenteredElement) / 2"

  • Практически я имею в виду, что использование таблиц в порядке. Я намерен использовать этот макет в основном для специальных страниц, таких как логин. Так что чистота CSS здесь не так важна, хотя для будущей совместимости желательны следующие стандарты.

Ответы [ 5 ]

4 голосов
/ 14 ноября 2008

С http://www.webmonkey.com/codelibrary/Center_a_DIV

#horizon        
    {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    display: block
    }

#content    
    {
    width: 250px;
    height: 70px;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    visibility: visible
    }

<div id="horizon">
   <div id="content">
      <p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
   </div><!-- closes content-->
</div><!-- closes horizon-->
2 голосов
/ 08 сентября 2008 
<!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>
 <title>Centering</title>
 <style type="text/css" media="screen">
  body, html {height: 100%; padding: 0px; margin: 0px;}
  #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
  #middle {vertical-align: middle}
  #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
 </style> 
</head>
<body>
 <table id="outer" cellpadding="0" cellspacing="0">
  <tr><td id="middle">
   <div id="centered" style="border: 1px solid green;">
    Centered content
   </div>
  </td></tr>
 </table>
</body>
</html>

Решение от community.contractwebdevelopment.com также является хорошим. И если вы знаете высоту вашего контента, который должен быть отцентрирован, кажется, лучше.

1 голос
/ 22 октября 2012

Для этого вопроса вы можете использовать этот стиль 

#yourElement {
   margin:0 auto;
   min-width:500px;
}
1 голос
/ 08 сентября 2008

Для горизонтального: 

<style>
body
{
    text-align:left;
}
.MainBlockElement
{
    text-align:center;
    margin: 0 auto;
}
</style>

Вам нужно text-align: left в теле, чтобы исправить ошибку при рендеринге IE.

0 голосов
/ 11 сентября 2008

Это то, что вы пытаетесь достичь? Если нет, пожалуйста, объясните, чем отличается изображение ниже?

alt text

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...