Сделать левый текст вертикально центром

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

У меня есть два текста, когда экран узкий, один над другим; когда экран достаточно широк, они отображаются бок о бок: JSBin:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style> 
    .frame { 
     vertical-align: middle; 
    } 
    </style> 
</head> 
<body> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="frame"> 
     when side by side, I want this text to be in the middle vertically. 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed in confined juvenile. 
    </div> 
    </div> 
</body> 
</html>

Один формат, я хочу понять, что, когда они находятся рядом друг с другом, слева текст вертикально в середине. Просто добавление <br><br> в левом тексте не является хорошим выбором, потому что, когда один над другим, я не хочу, чтобы <br><br> оставался.

Я пробовал vertical-align: middle, он не работает.

У кого-нибудь есть хороший способ реализовать это?

источник

2016-11-28 SoftTimur

Вы можете использовать CSS Flexbox. Сделайте свой родительский контейнер с гибкого контейнера, так же, как это:

.row { 
    display: flex; 
    align-items: center; /* vertically center aligns children */ 
} 

/* On Mobiles */ 
@media screen and (max-width: 767px) { 
    .row { 
    flex-direction: column; /* On mobile change direction */ 
    } 
}

Посмотрите на ниже фрагменте кода:

body { 
 
    margin: 30px; 
 
} 
 

 
.box-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    flex: 1; 
 
} 
 

 
/* On Mobiles */ 
 
@media screen and (max-width: 767px) { 
 
    .box-container { 
 
    flex-direction: column; 
 
    } 
 
    
 
    .box { 
 
    margin-bottom: 15px; 
 
    } 
 
    
 
    .box:last-child { 
 
    margin-bottom: 0; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="row box-container"> 
 
    <div class="box col-sm-6"> 
 
     <div class="frame"> 
 
     when side by side, I want this text to be in the middle vertically. 
 
     </div> 
 
    </div> 
 
    <div class="box col-sm-6"> 
 
     Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed in confined juvenile. 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

Надежда это помогает!

источник

2016-11-28 07:13:31

Спасибо ... Знаете ли вы [это] (http://v4-alpha.getbootstrap.com/layout/flexbox-grid/)? Я пытаюсь это выяснить и надеюсь получить более простое решение ... – SoftTimur

@SoftTimur Да, его Bootstrap v4 alpha, но его все еще в разработке. Поэтому мы не можем полностью полагаться на него, пока он не будет выпущен, надеюсь, что вы поняли. Дайте мне знать, если вам нужна другая помощь! –

ok ... Я думаю, поэтому я не могу воспроизвести пример в моем jsbin ... – SoftTimur

добавить правильные боковые подушки или установить правильную ширину или отрегулировать поведение элементов блока.

источник

2016-11-28 07:08:21 k2a

Сделать левый текст вертикально центром

ответ

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