Вертикальный выравнивать текст бутстрапа в столбце

Question

У меня есть расположение двух столбцов с вложенными столбцами в левом столбце. Как бы вертикально выровнять текст в правом столбце до середины бутстрапа?

Я попытался установить верх: 50%, но ничего не происходит. И я также попытался использовать выравнивание по вертикали: средний.

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-6"> <!-- Left Column--> 
     <div class="row"> 
     <div class="col-lg-6" style="height: 350px; background-color: red;">1</div> 
     <div class="col-lg-6" style="height: 350px">2</div> 
     <div class="col-lg-6" style="height: 350px">3</div> 
     <div class="col-lg-6" style="height: 350px; background-color: red">4</div> 
     </div> 
    </div> 

    <div class="col-lg-6"> <!-- Right Column--> 
    <div class="box-section"> 
     <h2 class="custom-font font-xx">THIS TEXT<br> 
     Metals & O-rings</h2> 
     <h4 class="custom-font font-sub">THIS TEXT</h4> 
    </div> 
    </div> 

    </div> 
</div> 

Cheers!

Answer 1

Не уверен, что это именно то, что вам нужно.

но вы можете установить высоту, а затем вертикальное выравнивание.

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-6"> <!-- Left Column--> 
     <div class="row"> 
     <div class="col-lg-6" style="height: 350px; background-color: red;">1</div> 
     <div class="col-lg-6" style="height: 350px">2</div> 
     <div class="col-lg-6" style="height: 350px">3</div> 
     <div class="col-lg-6" style="height: 350px; background-color: red">4</div> 
     </div> 
    </div> 

    <div class="col-lg-6" style="height:700px"> <!-- Right Column--> 
    <div class="box-section"> 
     <h2 class="custom-font font-xx">THIS TEXT<br> 
     Metals & O-rings</h2> 
     <h4 class="custom-font font-sub">THIS TEXT</h4> 
    </div> 
    </div> 

    </div> 
</div> 

Затем добавьте этот CSS

/* CSS используется здесь будет применяться после того, как bootstrap.css */

.box-section 
{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

это проблема не будет реагировать со значениями набора высоты, однако вы можете установить, что отдельно в CSS

http://www.bootply.com/FOsl3LiKn1

Answer 2

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

.box-section{ 
margin-top:50%; 
transform: translateY(-50%); 
} 

раздвоенный сниппет: http://www.bootply.com/84dXtE0F2B