Вертикальное выравнивание вложенной строки в bootstrap

-1

Я пытаюсь вертикально центрировать строку, вложенную в строку, но не уверен, как это сделать. Я попытался добавить выравнивание по вертикали к вложенной строке, но это не сработает. Похоже, что вложенная строка не расширяется до полной высоты родительской строки. Не знаете, как сделать эту строку расширением до ширины родителя. Я использую bootstrap.Вертикальное выравнивание вложенной строки в bootstrap

.home{ 
 
\t background: url("./../assets/covers/home.jpg") no-repeat center center fixed; 
 
\t background-size:  100% 100%;      /* <------ */ 
 
    background-repeat: no-repeat; 
 
    background-position: top center;    /* optional, center the image */ 
 
\t background-color: #fff; 
 
\t min-height: 1000px; 
 
\t max-height: 2832px; 
 

 
} 
 
.header{ 
 
\t background:rgba(7,14,2,0.85); 
 
\t color: #fff; 
 

 
\t vertical-align: middle; 
 
} 
 
.header h1{ 
 
\t font-size: 80pt; 
 
\t padding: 40px 0px 0px 0px; 
 
\t line-height: 60%; 
 
} 
 
.header h2{ 
 
\t font-size: 23pt; 
 
\t padding:0 0 40px 0; 
 
}

<div class="container-fluid clearfix" > 
 

 
      <section class="" id=""> 
 
       <div class="row"> 
 
        <div class="col-md-12 home "> 
 
         <div class="row vertical-align"> 
 
          <div class="col-md-5 header text-center col-centered "> 
 
           <h1>test</h1> 
 
           <h2>test</h2>         
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </section> 
 

 
      <section class="" id="mission"> 
 

 
      </section> 
 

 
      <section class="" id="care"> 
 

 
      </section> 
 

 
      <section class="" id="procedures"> 
 

 
      </section> 
 

 
      <section class="" id="help"> 
 

 
      </section> 
 

 
      <section class="" id="location"> 
 
       <div class="row"> 
 
        <div class="colum-md-6 gap-none"> 
 
         <!-- <img class="bgwidth" src="./assets/covers/hands.jpg"> --> 
 
        </div> 
 
       </div> 
 
      </section> 
 

 
     </div>

источник

2015-12-17 joe

Вы хотите, чтобы большой «ТЕСТ» был центрирован? –

Я хочу, чтобы заголовок всей группы был центрирован как по горизонтали, так и по вертикали. Я сосредоточен по горизонтали, но не вертикально. – joe

Вы хотите, чтобы темный серый контейнер был центрирован над изображением или порт представления? –

Я думаю, что вы просите за это? Трудно сказать. http://jsfiddle.net/mm6ck3dc/6/

.header{ 
    background:rgba(7,14,2,0.85); 
    color: #fff; 
    position: absolute; 
    width: 100%; 
    top: 50%; 
    transform: translateY(-50%); 
}

источник

2015-12-17 16:44:49

Это, но я не хочу, чтобы фон проходил по всей ширине. – joe

Итак, где вы хотите, чтобы изображение должно было идти? У вас установлен размер изображения 100% 100%, я не изменил его. если вы не хотите его 100%, то почему бы не изменить его? –

Нравится? http://jsfiddle.net/mm6ck3dc/8/ –

Вертикальное выравнивание вложенной строки в bootstrap

ответ

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