Как вертикально центрировать контент в Twitter Загрузочный лоток, который работает?

Я прочитал предыдущие вопросы и попытался их решения, но никто не работает.Как вертикально центрировать контент в Twitter Загрузочный лоток, который работает?

Мой пример Bootstrap HTML очень прост:

... 
<body> 
    <div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4" class="centering"> 
     span4 
     </div> 
     <div class="span8" class="centering"> 
     span8    
     </div> 
    </div> 
    </div> 
</body> 
...

CSS-что описывает centering класс выглядит следующим образом:

.centering { 
    float:none; 
    margin:0 auto; 
}

браузеры делают этот код, поместив текст span4 и span8 в в верхней части окна браузера, а не в вертикальной середине окна браузера. Что я забыл при настройке?

источник

2013-05-02 Alex Reynolds

только наблюдение, но не могу ДИВ класс = «span4» класс = «центрирование» становится div class = «span4 centering»? хотите ли вы, чтобы контент в пределах промежутков был центрирован? если это так, попробуйте текст align: center, not sure, если я понимаю вопрос? пример поможет ... см. http://jsfiddle.net/BzYxM/ – Richlewis

Я не знаю, если это будет очень удобно для вас в реальной ситуации, но стоит посмотреть, так или иначе:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body{height:100%; margin:0;padding:0} 

.container-fluid{ 
    height:100%; 
    display:table; 
    width: 100%; 
} 

.row-fluid {height: 100%; display:table-cell; vertical-align: middle;} 

.centering { 
    float:none; 
    margin:0 auto; 
} 
</style> 

</head> 
<body> 
    <div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4" class="centering"> 
     span4 
     </div> 
     <div class="span8" class="centering"> 
     span8    
     </div> 
    </div> 
    </div> 
</body> 
</html>

источник

2013-05-02 10:40:41

Спасибо, но это не сработало, когда было содержимое как в элементах 'span4', так и' span8'. Казалось, что это работает, когда есть контент в 'span4' или' span8'. –

Хм, это странно. Кажется, работает для меня, если я добавлю содержимое в оба этих divs ... если я не пропущу что-то. Вы говорите о большом количестве контента? –

Только текст в одном div (предложение или два) и изображение в другом. –

Как вертикально центрировать контент в Twitter Загрузочный лоток, который работает?

ответ

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