bootstrap выравнивать вертикально содержимое в середине

Как можно выровнять по вертикали содержимое в середине столбца? это мой jsffidle, я бы хотел, чтобы текст в левом столбце был выровнен по вертикали в центре столбца Есть ли специальный класс бутстрапа?bootstrap выравнивать вертикально содержимое в середине

<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 "> 
     <span class="v-align">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</span> 
    </div> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
     <img class="pull-right img-responsive" style="margin-top:10px;"src="http://lorempixel.com/1000/1000" /> 

    </div> 
</div>

источник

2015-04-04 mattia

Вы можете попробовать это:

.row { 
    display: table; 
} 

[class*="col-"] { 
    float: none; 
    display: table-cell; 
    vertical-align: middle; 
}

источник

2015-04-04 13:12:51 Danko

я предпочитаю свое решение, вы знаете, если это кросс-браузер? – mattia

Да, это так. Вы можете использовать .col-sm-6 вместо [class * = "col-"], который является селектором атрибутов. Я не уверен, что вам нужны все эти классы, поэтому, если вы хотите попробовать использовать только .col-sm-6. Я был бы признателен, если бы вы отметили это как «ответили». – Danko

Использование <center> центрирует текст, и используя <div> тег с атрибутом align набор для center будет делать то же самое. Если вы хотите, чтобы элемент центрируется на странице, используя <table>should work (jsfiddle):

<html> 
Lorem Ipsum something something. 
<table align="center"> 
    <tr><td width="20%">Hello</td></tr> 
</table> 
</html

источник

2015-04-04 12:54:52 Phantom

Возможное решение с некоторыми JS (нужен небольшой добавляет для гибкой компоновки):
https://jsfiddle.net/muzd1prc/

.v-align-container{ 
-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
transform-style: preserve-3d; 
} 
.v-align{ 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

$(document).ready(function() { 
    $(".v-align-container img").bind('load', function(event) { 
     var $row = $(this).parents(".v-align-container:first"); 
     $row.height($row.height());    
    }); 
});

источник

2015-04-04 13:42:47 khv2online

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

так же, как показано ниже: -

<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 "> 
     <span class="v-align" style="vertical-align: middle; display: table-cell; height: 565px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</span> 
    </div> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
     <img class="pull-right img-responsive" style="margin-top:10px;" src="http://lorempixel.com/1000/1000" /> 

    </div> 
</div>

источник

2015-04-04 14:38:42 Tony

bootstrap выравнивать вертикально содержимое в середине

ответ

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