Выровняйте div, используя CSS - PullRequest
Новая
       6

Выровняйте div, используя CSS

0 голосов
/ 18 ноября 2009

В моем css-файле определено следующее: 

body  {
    text-align: center;
    float: right;
    position: fixed;
}
.twoColFixRtHdr #container {
    width: 780px;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
}

и мой HTML определен следующим образом: 

<body class="twoColFixRtHdr">
  <div id="container">
    <div id="header">

Проблема в том, что в IE (все версии, которые я смог проверить) центрируется содержимое страницы, но в Firefox она выравнивается по левому краю. Я знаю, что text-align: center будет центрировать содержимое элемента, но не сам элемент, поэтому вы должны вложить свой контент, для чего и нужен дополнительный div. Но я должен что-то упустить из-за различий между IE и Firefox с точки зрения того, как он отображает этот тег.

Есть идеи? Вы можете посмотреть на сайте: http://www.solar -fit.ca

Ответы [ 5 ]

1 голос
/ 18 ноября 2009

эти два вызывают проблему

тело -> плавать: правильно; положение: фиксированное;

удалить эти

1 голос
/ 18 ноября 2009

Вы уже пробовали это? 

#container{
  width: 780px ;
  margin-left: auto ;
  margin-right: auto ;
}

При таком подходе вам не нужен вложенный div. По данным источника ...

"Код выше был протестирован с IE 6, 7, Firefox, Opera и Safari. "

0 голосов
/ 18 ноября 2009

Удалите свойства float и position из правила body и добавьте 100% ширины. 

body { text-align: center; width: 100% }
0 голосов
/ 18 ноября 2009

Не уверен в причине, но исправление переводит IE в стандартный режим через DOCTYPE, например 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    body  {
        text-align: center;
        float: right;
        position: fixed;
    }
    .twoColFixRtHdr #container {
        width: 780px;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left;
    }
</style>
</head>
<body class="twoColFixRtHdr">
  <div id="container">
    <div id="header">
    Some text goes here
    </div>
  </div>
</body>
</html>
0 голосов
/ 18 ноября 2009

Как насчет помещения margin: 0px auto; в тело?

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

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

...