Выровнять по вертикали/горизонтально с помощью бутстрапа

Я задал этот вопрос несколько раз, но никто не смог решить мою проблему.Выровнять по вертикали/горизонтально с помощью бутстрапа

Проблема в том, что я не могу заставить заголовок сидеть полностью централизованно на фоне полной страницы.

Существует, однако, один метод, который работает (закомментирован в теге заголовка), но сталкивается с проблемами при достижении полной совместимости с браузером.

HTML

<body> 
    <div class="container-fluid text-center"> 
     <header role="banner" id="banner" class="vcenter"> 
      <h1>Fix this</h1> 
      <h2>Bootstrap/css</h2> 
      <h3>Please</h3> 
     </header> 
    </div> 
</body>

CSS (остальное в jsfiddle)

.vcenter { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
}

Я сделал jsfiddle, чтобы попытаться описать проблему я обращенную. Обратите внимание, что фоновое изображение было изменено на сплошной цвет. http://jsfiddle.net/wesbbtqn/

Если кто-то может это исправить, я буду очень благодарен, поскольку он прослушивал меня целую вечность.

EDIT - высота и ширина должны оставаться гибкими.

источник

2015-01-16 Mo Martin

Возможно ли узнать/установить высоту заголовка? – Slime

Мне не совсем понятно, как именно вы хотите сосредоточиться. Должны ли три строки текста быть центрированы по вертикали? И должна ли каждая линия быть горизонтальной или горизонтальной или все линии должны быть центрированы горизонтально (делая левую сторону каждой линии вертикально выровненной друг с другом)? – ckuijjer

Извините, я забыл сказать, что высота и ширина должны оставаться гибкими. И да, все 3 строки должны быть полностью центральными на странице, как по горизонтали, так и по вертикали. –

Если я правильно, что вы спрашиваете:

Горизонтальное центрирование:

просто добавить text-align: center к h1, h2 и h3.

Вертикальное центрирование:

Одним из способов достижения этой цели в чистом CSS, в поддерживаемом кроссбраузерной образом, и без установки явно высота контейнера является добавление display: table родителю контейнера, и display: table-cell (наряду с уже присутствует vertical-align: middle) для самого контейнера (в вашем случае: <header>)

.vcenter { 
    vertical-align: middle; 
    display: table-cell; 
}

http://jsfiddle.net/wesbbtqn/3/

источник

2015-01-16 13:35:08

Я думаю, что это отсортировало мои проблемы, я проверю его в нескольких браузерах и отчитаюсь об этом. Спасибо –

приветствую :) –

Вы отсортировали мою проблему! Спасибо, кучка, эта проблема убивала меня –

Вы ищете это:

http://jsfiddle.net/shannabarnard/wesbbtqn/4/

Все, что я сделал добавить

text-align: center; 
width: 90%; 
height: 50%; 
position: absolute; 
top:0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto;

на ваш заголовок CSS.

источник

2015-01-16 13:28:22 Pianoc

Я пробовал это, и когда на полноэкранном фоне, похоже, сидит под фоном. –

Это больше похоже на проблему z-index. Убедитесь, что ваш заголовок установлен на более высокий индекс z, чем div. Если вы можете создать свою проблему в скрипке, вам будет легче дать вам правильный ответ. – Pianoc

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
header { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
}

<header> 
 
    <h1>Fix this</h1> 
 
    <h2>Bootstrap/css</h2> 
 
    <h3>Please</h3>    
 
</header>

источник

2015-01-16 13:48:28 ckuijjer

во-первых, изменить код CSS для этого класса .vcenter быть похожим на это:

.vcenter { 
    display: inline; 
    vertical-align: middle; 
    float: none; 
    text-align:center; 
}

, а затем добавить новый класс в контейнере элемента, чтобы быть, как это <div class="container-fluid text-center page-container">.

и добавить новый класс в вашем CSS, чтобы переопределить height:100%; из .container-fluid:

.page-container{ 
    height:auto !important; 
}

мы надеемся помочь.

источник

2015-01-16 14:00:37 Jogjakal

Выровнять по вертикали/горизонтально с помощью бутстрапа

ответ

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