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

Как на самом деле вы центрируете div по вертикали?Вертикальный выровнять блок

Горизонтальные пути уже есть, но независимо от того, что я пытаюсь, вертикальное центрирование просто невозможно.

тело {вертикальной Align: средний;}

ничего не делает

тело {выравнивания текста: средний;}

ничего не делает

div.middle {to р: 50%;}

ничего не делает

Возможно ли это?

Я думаю, что я буду плакать.

источник

2009-12-13 Neros

heres окончательный результат - http: // stackoverflow.com/questions/1890944/html-css-create-a-div-that-always-fills-the-whole-page-and-a-resizeable/1900027 # 1900027 – Neros

См. Vertical Centering in CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Universal vertical center with CSS</title> 
    <style> 
    .greenBorder {border: 1px solid green;} /* just borders to ser it */ 
    </style> 
</head> 

<body> 
    <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> 
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> 
     <div class="greenBorder" style=" #position: relative; #top: -50%"> 
     any text<br> 
     any height<br> 
     any content, for example generated from DB<br> 
     everything is vertically centered 
     </div> 
    </div> 
    </div> 
</body> 
</html>

источник

2009-12-13 11:32:05 cletus

спасибо, хороший код, но есть эта чертова " set height ', поэтому я думаю, что нет возможности центрировать блок для использования с различными разрешениями экрана? – Neros

Вы можете сделать внешнюю высоту 100%. См. Http://stackoverflow.com/questions/25238/100-min-height-css-layout – cletus

ДИВ должен иметь фиксированную высоту для того, чтобы сделать возможным, насколько я знаю.

#centered { width: 700px; height: 400px; position: absolute; top: 50%; left: 50%; margin: -200px 0 0 -350px; }

И сделать родительский слой #centered позиционирован относительно. Это должно сработать.

Редактировать - значит можно иметь неопределенную высоту. См. Ответ cletus.

источник

2009-12-13 11:33:37 Joost

нет, вам нужна определенная высота – Neros

Это может помочь: http://ask.amoeba.co.in/

источник

2009-12-14 09:49:09 Aneeska

приятно, но я думаю, что мой немного больше versetile, хотя мой использует javascript. – Neros

Убедитесь, что ваш внешний DIV является «позиция: относительная» ИЛИ «позицию: абсолютная» (для точки отсчета). 2. Установите фиксированную высоту для внутреннего div. 3. Установите внутренний div на «top: 50%», чтобы переместить его в середину. 4. И шаг, который люди забывают, это установить «margin-top: -yy» (-yy - половина высоты внутреннего div для смещения div вверх).

Скажите, что ваш внутренний div установлен на высоту: 100px ;. Код будет следующим:

<style type="text/css"> 
#outerDiv { position: relative } 
#innerDiv { position: absolute; top: 50%; height: 100px; margin-top: -50px } 
</style>

источник

2012-02-10 09:15:53 Illuin

использование Flexible Box Layout Module для осуществления этого. Вот ссылка на codepen. Это простое и лучшее решение что я чувствую. Если вы не заботитесь о браузерах IE, это лучший способ выравнивания блоков. «Угловой материал» также использует это для создания своей сетки.

<div class="center"> 
     <div> 
      <h4> 
        I am at center 
      </h4> 
     </div> 
</div> 


.center { 
     /*this is for styling */ 
     height: 100px; 
     margin: 1em; 
     color:#fff; 
     background: #9f5bd0; 

     /*you just have to use this */ 
     display: flex; 
     justify-content:center; 
     align-items:center; 
}

Чтобы узнать 'Flexible Layout Module Box' вы можете посетить Flexbox Froggy.

источник

2016-07-22 06:24:40

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

ответ

Смежные вопросы