Как бы выровнять контейнер <div>по середине веб-страницы? - PullRequest
Новая
       37

Как бы выровнять контейнер <div>по середине веб-страницы?

0 голосов
/ 13 марта 2011

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

www.solarfields.com Это такой же хороший пример, как и любой другой. Я хочу выровнять свой контент так же, как его, в середине веб-страницы. Однако он использует Flash, и я бы хотел придерживаться HTML и CSS. Я включил все тело моего сайта в тег с этими атрибутами: 

#body {
    position:absolute;
    top:13%;
    left:25%;
    width:350px;
}

Он центрирован на моем мониторе (1600x900), но я хочу, чтобы он был центрирован на всех разрешениях.

Размер: 525px (h) x 350px (w).

Я более одного <div>.

Меня не волнует совместимость браузера.

Я не хочу видимых границ.

Есть одна таблица шириной 801 пикселей. Он имеет два <td>, 29 пикселей и 762 пикселей в ширину.

Я нуб CSS, поэтому я просто даю случайную информацию. Если вам нужно что-то еще, не стесняйтесь, напишите мне @ mattjack66@gmail.com.

Большое спасибо.

Ответы [ 3 ]

1 голос
/ 13 марта 2011

Если вы установите margin: 0 auto; для элемента div, для которого также задана ширина, он будет центрироваться в родительском контейнере.

Чтобы быть более конкретным, возьмите следующее css: 

div#body {
    width:902px;  //Or whatever your content width is
    margin:0 auto;
    padding:0;
}

и примените этот класс к самому внешнему div на вашем сайте: 

<html>
    <body>
        <div id"body">
            ...The rest of your content...
        </div>
    </body>
</html>

То, что это делает, устанавливает верхнее и нижнее поля #body равными 0, а левое и правое поля автоматически распределяют пустое пространство между ними; который центрирует этот div на странице. Это касается левого / правого центра.

1 голос
/ 13 марта 2011

По горизонтали и вертикали: 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
                body div {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                }
                body div div {
                    position: relative;  
                    top: -262px;
                    height: 525px;                 
                    width: 350px;
                    margin: 0 auto 0;
                    background: #000;
                }
        </style>
    </head>
    <body>
        <div><div>Testing</div></div>
    </body>
</html>
0 голосов
/ 13 марта 2011

Решение: http://jsfiddle.net/magicaj/Xd7sK/5/

Простое центрирование по горизонтали, вам просто нужно установить margin:0 auto; на элементе, который вы хотите центрировать.Однако получить элемент для центрирования по вертикали гораздо сложнее.Существуют решения только для CSS , которые имитируют то, что таблицы уже могут делать с помощью vertical-align:middle; CSS.Я всегда стараюсь использовать таблицы только для табличных данных, но в этом случае я нахожу таблицы для макетов приемлемыми:

HTML: 

<table class="wrapper">
    <tr>
        <td>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in  lobortis ante. Phasellus rhoncus, magna adipiscing consequat viverra,  nibh lectus eleifend neque, eget fermentum massa mauris id felis. Morbi  aliquet fermentum quam ut sollicitudin.
            </div>
        </td>
    </tr>
</table>

CSS: 

html, body, .wrapper {
    height:100%;   
}

.wrapper {
    margin: 0 auto; /* center horizontally */
}

.wrapper td {
    height:100%;
    vertical-alignment: middle; /* center vertically */   
}

.content {
    width: 350px;
    background:#ccc;
}
...