Вертикально содержимое центра в строке Bootstrap3?

У меня есть страница Bootstrap3, а где-то на полпути - строка с полной высотой отображения. Как центрировать содержимое строки по вертикали?Вертикально содержимое центра в строке Bootstrap3?

Я уже пробовал свойство css "vertical-align: center", но это, похоже, не работает (и не «средний», а не «центр»).

Вот небольшой live demo, или как автономный HTML, например:

<!DOCTYPE html><html><head><meta charset='utf-8'> 

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'> 
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'> 
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script> 

<style type='text/css'> 
    .row { color:#ff0; } 
    .bg1 { background:#007; } 
    .bg2 { background:#060; } 
    .special { background:#600; height:100vh; vertical-align:center; } 
</style> 

</head><body> 

<div class="container-fluid text-center"> 

    <div class="row bg1">Top row<br><br></div> 

    <div class="row bg2">Another row<br>With some content<br><br></div> 

    <div class="row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div> 

    <div class="row special"> 
     <h2>Hello</h2> 
     This should be vertically centered 
    </div> 

    <div class="row bg2">And here's yet another row<br><br></div> 

    <div class="row bg1">The bottom row<br><br></div> 

</div> 

</body></html>

источник

2014-11-12 RocketNuts

Благодаря обоим, решение таблицы фактически работало хорошо! – RocketNuts

.row имеет отрицательные поля для столбцов, используя без внутреннего col-X-X собирается дать вам странные результаты. Прочтите документы о том, как использовать систему сетки.

Есть множество способов vertical-align:middle (не центр) http://css-tricks.com/centering-in-the-unknown/

DEMO: http://jsfiddle.net/mLopevv8/

READ ME: Сделайте еще один класс для .row, удалить .container-жидкость, преобразуйте родительский элемент вертикально выровненного среднего содержимого к дисплею: таблица и дочерний элемент теперь отображаются: table-cell.

CSS

.special { background:#600; height:100vh; display:table;width:100%;} 
.v-m {display:table-cell;vertical-align:middle}

HTML

<div class="text-center"> 
    <div class="my-row bg1">Top row<br><br></div> 
    <div class="my-row bg2">Another row<br>With some content<br><br></div> 
    <div class="my-row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div> 
    <div class="my-row special"> 
     <div class="v-m"> 
     <h1>Hello</h1> 
     This should be vertically centered! 
     </div> 
    </div> 
    <div class="my-row bg2">And here's yet another row<br><br></div> 
    <div class="my-row bg1">-- The bottom row --<br><br> 
    </div> 
</div>

источник

2014-11-12 16:00:30 Christina

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

or

U может проверить эту ссылку, это может помочь вам: http://jsfiddle.net/jasongennaro/unfwL/1/

источник

2014-11-12 15:19:09 user1976940

Спасибо, но контент, который должен быть центрирован, состоит из небольшого абзаца (который также может содержать строки или разрывы строк) и, возможно, изображение или больше. Таким образом, изменение высоты линии для обеспечения центрирования, как правило, также влияет на сам контент ...? Что касается другого примера: он использует отображение таблицы, что, к сожалению, не очень удобно в моем случае (это влияет на то, как оно отображается вообще). – RocketNuts

Вертикально содержимое центра в строке Bootstrap3?

ответ

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