Центрирование Div в середине страницы - PullRequest
Новая
       7

Центрирование Div в середине страницы

2 голосов
/ 30 мая 2010

Хорошо, я завернул 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>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>test.html</title>
    <style type="text/css">
        .wrapper
        {
            margin: 0px auto;
        }
        .testimonials_png
        {
            position: absolute;
            left:20px;
            top:397px;
            width:220px; 
            height:395px;
            background: url("test_files/testimonials.png") no-repeat;
        }
        .homeLink_png
        {
            position: absolute;
            left:-1px;
            top:243px;
            width:203px; 
            height:75px;
            background: url("test_files/homeLink.png") no-repeat;
        }
        .sidingLink_png
        {
            position: absolute;
            left:202px;
            top:243px;
            width:180px; 
            height:75px;
            background: url("test_files/sidingLink.png") no-repeat;
        }
        .windowsLink_png
        {
            position: absolute;
            left:382px;
            top:243px;
            width:181px; 
            height:75px;
            background: url("test_files/windowsLink.png") no-repeat;
        }
        .roofingLink_png
        {
            position: absolute;
            left:563px;
            top:243px;
            width:183px; 
            height:75px;
            background: url("test_files/roofingLink.png") no-repeat;
        }
        .aboutLink_png
        {
            position: absolute;
            left:746px;
            top:243px;
            width:205px; 
            height:75px;
            background: url("test_files/aboutLink.png") no-repeat;
        }
        .banner_png
        {
            position: absolute;
            left:0px;
            top:0px;
            width:950px; 
            height:243px;
            background: url("test_files/banner.png") no-repeat;
        }

    </style>
     </head>
  <body>
    <div class="wrapper">
    <div class="testimonials_png"> </div>
    <div class="homeLink_png"> </div>
    <div class="sidingLink_png"> </div>
    <div class="windowsLink_png"> </div>
    <div class="roofingLink_png"> </div>
    <div class="aboutLink_png"> </div>
    <div class="banner_png"> </div>
    </div>
  </body>
</html>

Ответы [ 2 ]

3 голосов
/ 30 мая 2010

Чтобы браузер мог корректировать центр div, вы должны дать ему некоторую информацию об этом div, поэтому: 

    .wrapper
    {
        margin: auto;
    }

(скопировано из вашего кода) это неправильно, но: 

    .wrapper
    {
        width:900px;
        margin:0 auto;
    }

Работает просто отлично! вы говорите браузеру, что ваша обертка шириной 900px, а остальные браузеры должны делиться поровну на правую и правую стороны обертки ... Таким образом, margin: auto; не даст вам ничего ... нужна спецификация устройства (для центрирования используйте 0).

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

    .wrapper
    {
        postion:absolute;
        top:0;
        left:50%;
        width:900px;
        margin-left:-450px;
    }

Это будет браузер, который обертка должна находиться в абсолютном положении, что она находится на 0 единиц сверху, и 50% окна браузера слева ... чтобы отцентрировать его, просто потяните его назад на половину заданная ширина, таким образом -450px поля слева.

Теперь ваш контент должен быть установлен в положение: относительное; быть относительно позиционированным относительно позиции оболочки ...

ОК, вот ваш код (проверено): 

<!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>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>test.html</title>
    <style type="text/css">
        .wrapper
        {
            position:absolute;
            left:50%;
            width:950px;
            margin-left:-475px;
        }
        .testimonials_png
        {
            position: absolute;
            left:20px;
            top:397px;
            width:220px;
            height:395px;
            background:green url("test_files/testimonials.png") no-repeat;
        }
        .homeLink_png
        {
            position: absolute;
            left:-1px;
            top:243px;
            width:203px;
            height:75px;
            background:purple url("test_files/homeLink.png") no-repeat;
        }
        .sidingLink_png
        {
            position: absolute;
            left:202px;
            top:243px;
            width:180px;
            height:75px;
            background:orange url("test_files/sidingLink.png") no-repeat;
        }
        .windowsLink_png
        {
            position: absolute;
            left:382px;
            top:243px;
            width:181px;
            height:75px;
            background:yellow url("test_files/windowsLink.png") no-repeat;
        }
        .roofingLink_png
        {
            position: absolute;
            left:563px;
            top:243px;
            width:183px;
            height:75px;
            background:blue url("test_files/roofingLink.png") no-repeat;
        }
        .aboutLink_png
        {
            position: absolute;
            left:746px;
            top:243px;
            width:205px;
            height:75px;
            background:red url("test_files/aboutLink.png") no-repeat;
        }
        .banner_png
        {
            position: absolute;
            left:0px;
            top:0px;
            width:950px;
            height:243px;
            background:pink url("test_files/banner.png") no-repeat;
        }

    </style>
     </head>
  <body>
    <div class="wrapper">
        <div class="testimonials_png"> </div>
        <div class="homeLink_png"> </div>
        <div class="sidingLink_png"> </div>
        <div class="windowsLink_png"> </div>
        <div class="roofingLink_png"> </div>
        <div class="aboutLink_png"> </div>
        <div class="banner_png"> </div>
    </div>
  </body>
</html>
1 голос
/ 30 мая 2010

Лучший способ центрировать div IMO - создать основной div с именем wrapper и в css назначить поле: 0 auto; к этому элементу.

Таким образом, весь контент будет одинаково центрирован сверху, слева, справа, снизу и т. Д.

...