CSS центрирует div с вложенными div в истинный центр браузера без указания ширины - PullRequest
Новая
       12

CSS центрирует div с вложенными div в истинный центр браузера без указания ширины

1 голос
/ 15 апреля 2011

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

<body>
    <div class="wrapper">
         <div class="class1">Page 1 of 1</>
         <div class="class1"> — </>
         <div class="class1">Next</>
    </div>
</body>

Мне нужно, чтобы оболочка была мертвой точкой браузера. Не имеет значения, какая длина текста внутри, или количество делений. Как, черт возьми, это сделать ?! Я волнуюсь здесь. Я не так уж плох в CSS. Поиск в Google приводит к появлению сообщений на форуме с 2005 года. Или ответы найдены, потому что указана ширина, поэтому это просто обман.

Волосы вырваны!

Я не буду помещать свой CSS здесь, потому что он просто не работает, нет никакого смысла.

Спасибо.

Ответы [ 4 ]

4 голосов
/ 15 апреля 2011

Может быть, я что-то упускаю, но , почему у вас это не работает?: 

.wrapper {
     text-align:center;   
}

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

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

ОК не указали, что внутри div нужно плавать рядом друг с другом

ОК, затем используйте display:inline для внутренних делений: 

.wrapper div {
    display:inline;
}

«Но мне нужно, чтобы они отображались block, и они ДОЛЖНЫ быть плавающими!»

ОК, затем просто отправьте их и используйте исправление , если вам это нужно. 

.wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

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

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

3 голосов
/ 15 апреля 2011

Рабочая jsfiddle: http://jsfiddle.net/6utN2/1/

Я думаю, вам лучше было бы кодировать это с UL и использовать LI для ваших 3 элементов.

Вот почему: .wrapper ДОЛЖЕН выступать в качестве контейнера для этих 3 divs, потому что вы разместили их - вытащив их из потока документов.

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

Техника UL прекрасно работает здесь, хотя поначалу она не так интуитивна, НО UL - это контейнер, LI sвсе могут плавать влево (и останутся вложенными в своих родителей).Наконец, один div может использоваться для охвата любого элемента, который находится UL, и центрирования его.

ps - я использовал .fauxBody в качестве обертки-обертки - просто на голову.

0 голосов
/ 15 апреля 2011

Поскольку div является элементом уровня блока, для него должна быть указана ширина, равная менее 100% ширины браузера. Как правило, с определенным width вы можете использовать margin: 0 auto 0 auto; (top, right, bottom и left) для центрирования div.

В противном случае вы можете использовать: 

#wrapper {
    display: inline-block;
    margin: 0 auto;
}

Что уменьшает #wrapper div до ширины его содержимого, а , а затем центрирует его в окне. Я считаю, что это несовместимо с IE <7, так как <code>div , естественно, не имеет display: inline.

0 голосов
/ 15 апреля 2011

без указания ширины?Без указания ширины на обёртке это будет 100% тела.Если вы устанавливаете ширину, вам нужно только: 

#wrapper { width: 960px; margin: 0 auto; }
...