вертикально и горизонтально выравнивая два встроенных div внутри другого div ... и аккуратно сворачивая их - PullRequest
Новая
       12

вертикально и горизонтально выравнивая два встроенных div внутри другого div ... и аккуратно сворачивая их

0 голосов
/ 23 марта 2012

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

<div class="logo-align_container">
    <div class="logo_image">
        <img src="images/logo.png" />
    </div>
    <div class="logo_text">
        <div class="site_name">
            <h1>foo</h1>
        </div>
        <div class="site_slogan">
            <h2>bar</h2>
        </div>
    </div>
    <br class="clearBoth" />
</div>

Как центрировать logo_image и logo_text по вертикали и горизонтали в пределах logo-align_container? Всякий раз, когда я применяю исправления, разбросанные по сети, мне удается центрировать div по горизонтали, но logo_text всегда будет выравниваться по верху logo-align_container, и я ничего не могу сделать, чтобы изменить его положение.

Кроме того, изображение и текст составляют значительную часть страницы. Когда окно слишком маленькое для того, чтобы его можно было расположить на линии (которым они в настоящее время являются, через float: left на обоих и .clearBoth { clear: both; }, я бы хотел, чтобы они свернулись так, чтобы logo_text опустился ниже logo_image (что уже происходит до сих пор), но также для того, чтобы оба по-прежнему были выровнены по горизонтали и вертикали. Если это не является частью решения первой проблемы, было бы действительно здорово, если бы это можно было сделать отдельно.

Если бы мне пришлось дать logo-align_container фиксированную высоту, это было бы 532px.

Спасибо за ваше время!

РЕДАКТИРОВАТЬ: решение Wheresrhys почти попадает в цель. Вот что он не выполняет, что я хотел бы сделать: http://i.imgur.com/BhHMv.png

1 Ответ

0 голосов
/ 23 марта 2012

Эта скрипка демонстрирует решение: http://jsfiddle.net/wheresrhys/t6pUq/ с использованием display:inline-block

Несколько баллов

  1. Это не будет работать в ie7 и ниже, так как встроенный блок не поддерживается для элементов, которые имеют display:inline по умолчанию. Приличным отступлением в этом сценарии будет использование блока отображения, а затем установка margin: x auto 0 для logo_wrapper, где x - это значение, которое приблизительно помещает логотип и заголовок в центр по вертикали.
  2. Я немного изменил html - необходимо добавить обертку вокруг всех элементов, которые должны быть центрированы, а также комментарии предотвращают пробелы, влияющие на расположение элемента inline-block.
...