Нужна помощь в вертикальном центрировании div [дубликата]

0

Мне было интересно, что будет лучшим способом вертикального центрирования div внутри другого div. Единственное ограничение, которое у меня есть, это то, что.anim должен оставаться относительным! Я использовал текущий код, который у меня теперь внизу. Спасибо, парни!

HTML:

<div class="anim">

         <div class="spacer">
            <p>CONTENT</p>
            <p>more content</p>
        </div>

    </div>

CSS:

.anim {
    position:relative;
    width:75%;
    margin:auto;
    height:50%;
}

.spacer{
    position:absolute;
    height:300px;
    top:0;
    bottom:0;
}
Теги:
alignment
vertical-alignment

4 ответа

0

Из вашего вопроса, похоже, вы хотите что-то вроде этого... div.spacer вертикально центрирован, а div.anim остается относительным.

div.spacer поле div.spacer должно быть отрицательной половиной высоты .spacer.

Это решение работает только с фиксированной высотой для .spacer.

CSS

.anim {
    position:relative;
    width:75%;
    margin:auto;
    height:800px;
    background:#FF0
}    
.spacer {
    position:absolute;
    top:50%;
    margin:-150px 0 0;
    width:300px;
    height:300px;
    background:red
}

HTML

<div class="anim spacer">
    <p>
        Content
    </p>
    <p>
        More content
    </p>
</div>
Поделиться
  • 0
    Я не могу сделать фиксированной высоты извините: /
0

согласно w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical

Уровень CSS 2 не имеет свойства для вертикального выравнивания объектов. Вероятно, будет один уровень CSS 3. Но даже в CSS2 вы можете центрировать блоки по вертикали, объединяя несколько свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть центрировано по вертикали.

поэтому код действительно прост

.anim {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
}

вот демонстрация http://jsfiddle.net/AbTxS/

Поделиться
  • 0
    Спасибо за помощь! Но проблема в том, что я не могу иметь фиксированную высоту: /. Я должен упомянуть, что раньше Извините!
0 
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}

было бы вертикально выровнено

Поделиться
  • 0
    Вы должны использовать другой блок элемент между .anim и .spacer и установить его display:table-row , если вы собираетесь сделать что - то вроде этого. CSS таблицы должны имитировать реальные таблицы.
  • 0
    да, я попробовал этот метод ранее и, как ни странно, не работал: /
Показать ещё 1 комментарий
0

Легкий способ сделать это - дать вашему .anim div фиксированную высоту, допустим, 500 пикселей.

Затем вы можете просто добавить margin-top:

.anim {
  margin-top: 100px;    // (500 - 300) / 2 = 100
}

демонстрация

Поделиться
  • 0
    Есть ли способ сделать это без фиксированной высоты? Я использую проценты: /
  • 0
    @kduan Проблемой может быть наличие элемента фиксированной высоты внутри контейнера переменной высоты: например, если 50% эквивалентно 200px, то ваш элемент 300px будет переполнен из родительского элемента! Какая логика стоит за этим 50% требованием к высоте?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню