Как мне центрировать div и расширять его вокруг div внутри него? - PullRequest
Новая
       8

Как мне центрировать div и расширять его вокруг div внутри него?

5 голосов
/ 20 мая 2009

У меня есть страница, которую я хочу центрировать, с фоном и рамкой вокруг всего содержимого.

Я сделал div и установил его с цветом фона и желаемыми настройками границы.

Проблема в том, что внутри него есть div, которые плавают, а фон не растягивается вокруг плавающих div. Единственный способ, которым я смог заставить его работать, - это установить положение: абсолютное. Затем граница расширялась вокруг плавающих элементов div, но я не смог отцентрировать их, используя обычный html / css.

Я обнаружил взлом javascript, чтобы он центрировался, но он центрируется только после загрузки страницы и выглядит плохо.

Я уверен, что есть способ расширить контейнер и при этом центрировать его, я просто не могу понять.

Вот пример HTML-страницы, которая разделяет мои проблемы 

<div style="background-color: Red; width: 980px; position: absolute;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
</div>

и вот Javascript, который заставляет его работать (использует Jquery) 

$(function() {
        var winH = $(window).height();
        var winW = $(window).width();
        $("#container").css('left', winW / 2 - $("#container").width() / 2);
    });

Должен быть лучший путь.

Спасибо

Ответы [ 4 ]

8 голосов
/ 20 мая 2009

Используйте auto как левый и правый margin, чтобы центрировать элемент.

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

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
    <div style="clear: both; height: 0; overflow: hidden;"></div>
</div>
0 голосов
/ 21 мая 2009

Использование: 

<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">

Маржа: 0 авто; будет центрировать красный div.

Переполнение: скрыто; заставит красный div растягиваться, чтобы содержать два плавающих div.

0 голосов
/ 20 мая 2009

Возможно, я недостаточно хорошо понимаю ваш вопрос, но я думаю, что вы ищете что-то похожее на это. Вот наш простой макет: 

<html>
    <head>
        ...
    </head>

    <body>

        <div id="center">
            <!-- your content -->
        </div>

    </body>

</html>

Чтобы содержимое div # center переместилось в центр страницы, нам понадобится следующий CSS: 

body {
    text-align: center;
}

div#center {
    text-align: left;
    width: 600px;    // Or some other arbitrary width
    margin: 0 auto;
}

Это сосредоточит все в теле. Тем не менее, текст выравнивания: центр; Свойство также будет применено к дочерним элементам тела, поэтому мы отменяем это с помощью второго правила стиля. В качестве альтернативы вместо div # center вы можете использовать следующее правило стиля: 

body * {
    text-align: left;
}
0 голосов
/ 20 мая 2009

это сложно, но я использую следующий код в таблицах стилей; 

<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>

тогда в теле; 

<div class="sentor">
<div class="child">
    <div id="mycontent">

это должно сработать

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

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

...