Центрирование div по горизонтали с переменной шириной не работает в IE - PullRequest
Новая
       3

Центрирование div по горизонтали с переменной шириной не работает в IE

3 голосов
/ 08 июля 2010

Я практиковался для центрирования div без ширины и нашел решение, которое работает во всех распространенных браузерах.Но когда я перевожу это решение в настоящий стиль страницы, оно не будет работать в IE.

Практическое решение, которое отлично работает в IE, Chrome и Firefox, выглядит следующим образом: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Centerbox</title>
    <link type="text/css" rel="stylesheet" href="centerbox.css" media="all" />
</head>

<body>
    <div class="centerbox-outer">
        <div class="centerbox-inner">
            <p>Sample content that is not fixed width</p>
            <p>Some more content</p>
            <form>
                <input type="text" name="sampleinput" />
                <input type="submit" name="go" />
            </form>
        </div>
    </div>
</body>
</html>

centerbox.css 

div.centerbox-outer{
    text-align: center;
    margin: 0 auto;
}

div.centerbox-inner{
    text-align: justify;
    background-color: gray;
    display: inline-block;
}

Страница, на которой он не работает с IE, находится здесь: [ссылка удалена]

У кого-нибудь есть идеи, чего мне там не хватает?

Ответы [ 3 ]

9 голосов
/ 08 июля 2010

Провел некоторое исследование и нашел подходящее решение, используя относительные позиции. Кажется, это прекрасно работает в часто используемых браузерах.

Стиль будет следующим: 

div.centerbox-outer{
    margin: 0 auto;
    float: left;
    left: 50%;
    position: relative;
}

div.centerbox-inner{
    text-align: justify;
    background-color: gray;
    float: left;
    position: relative;
    right: 50%;
}
0 голосов
/ 08 июля 2010

div.centerbox-outer - это ширина 100%, поэтому ставить margin: 0 auto; не имеет смысла.Во всяком случае, вы должны поставить margin: 0 auto; на div.centerbox-inner.

0 голосов
/ 08 июля 2010

Чтобы центрировать div, используйте: 

 margin-left: auto; 
 margin-right: auto;

в css для div.Кроме того, я нашел для IE, вам может понадобиться изменить ваш DocType в соответствии со спецификацией HTML 4.Что-то вроде: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Я делаю это на своих страницах, и они идеально центрируются в IE.

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

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

...