Правильный способ центрировать <div>в xhtml? - PullRequest
Новая
       42

Правильный способ центрировать <div>в xhtml?

1 голос
/ 09 января 2011

Я работаю с XHTML 1.0 Transitional hctml-файлом типа документа, и я хочу иметь основной div с шириной 800px и сделать так, чтобы он отображался по центру (не содержимое div, а сам div).

Я использовал это в прошлом: 

<!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>
        <title></title>
        <style>
            <!--
            html, body { margin:0; padding:0; }

            #main-container { background:black; width:800px; }
            -->
        </style>
    </head>
    <body>
        <center>
            <div id="main-container">
                Content
            </div>
        </center>
    </body>
</html>

Но я не уверен, совместим ли он с кроссбраузерным интерфейсом, или это действительный xhtml.

Ответы [ 4 ]

5 голосов
/ 09 января 2011

Тег center устарел с 1998 года. Вам нужно применить CSS margin 0 auto; к div.Это установит верхнее и нижнее поле равным 0, а левое и правое - auto, что позволит самому div "auto-center", когда его width известен / исправлен.

См. Также:

1 голос
/ 09 января 2011

удалите теги center и установите это объявление CSS 

#main-container { margin: auto; width:800px }
0 голосов
/ 28 марта 2011

Используйте margin: 0 auto;, как указано выше: 

<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}
#main-container {
  background: black;
  width: 800px;
  margin: 0 auto;
}
</style>

И, кстати, если вы хотите проверить правильность XHTML, вам нужно добавить type="text/css" к вашим элементам стиля.Кроме того, почти нет необходимости скрывать свой CSS от старых браузеров, потому что в настоящее время почти все браузеры поддерживают CSS.

0 голосов
/ 09 января 2011

Вы можете использовать 

#container{
    position:relative;
    margin: auto;
}

или, если у вас есть фиксированная ширина для вашего контейнера, скажем, 800px, вы можете сделать что-то вроде 

#container{
    position:relative;
    left: -400px;
    margin-left: 50%;
}
...