Центральное содержимое (текст) бутстрапа col вертикально

Я видел более 10 вопросов stackoverflow и их ответов, пока ничего не работало.Центральное содержимое (текст) бутстрапа col вертикально

У меня есть текст внутри бутстрапа col, но он просто сидит в верхней части столбца. Мне нужно, чтобы он был центрирован, предпочтительно центрирован по отношению к изображению.

Я использовал медиа-объект, но он не выглядел хорошо для небольших устройств.

Это то, что у меня есть:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-5"> 
     ...img stuff.. 
    </div> 

    <div class="col-md-7 left-padding-30" style="height: 500px; border : 1px solid red;"> 
     <h2 class="featurette-heading"> 
      This First Heading 
      <span class="text-muted">Will Catch Your Eye</span> 
     </h2> 
     <p class="lead">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. </p> 
    </div> 
    </div>

Выход: enter image description here

jsfiddle: http://jsfiddle.net/9btr6zon/

Я установил высоту вручную 500px попробовать выравнивания содержимого , Есть ли способ удалить его, все еще центрируя содержимое для больших экранов?

Дополнительный вопрос, изображение использует img-circle и img-resposive, но это не изменение размера для небольших экранов, могу ли я исправить это?

Редактировать: В качестве решения «placeholder» я установил padding-top of col примерно 150 пикселей.

источник

2015-03-11 hfingler

Вы хотите, чтобы изображение вертикально центра с контентом или чем-то ??? –

Я разъяснил это. Мне нужен текст, который находится внутри div, чтобы быть вертикально центрированным по отношению к столбцу, в который он вставлен. В настоящее время он сидит в верхней части столбца. – hfingler

Можете ли вы предоставить jsfiddle этого, пожалуйста, –

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

.circle { 
 
    border-radius: 50%; 
 
\t width: 100px; 
 
\t height: 100px; 
 
    overflow:hidden; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 
.para { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 
h1,p {padding:0; margin:0;}

<div class="circle"> 
 
    <img src="http://placekitten.com/g/200/300"> 
 
</div> 
 
<div class="para"> 
 
    <h1>HELP ME MAMA</h1> 
 
    <p>The british are coming</p> 
 
</div>

источник

2015-03-11 19:40:40 aahhaa

Не работает для меня, изображение находится поверх текста. – hfingler

haha, я никогда не использую bootstrap самостоятельно, но у меня есть аналогичная структура. зайдите в документацию bootstrap, вам нужно что-то вроде .col-xs-12 или .col-sm-12. – aahhaa

'/ * Средние устройства (рабочие столы, 992px и выше) */ @media (min-width: @ screen-md-min) {...}' вы используете md, это применит к любому размеру экрана 992 и по-прежнему не мобильным ... так что смотрите на это и удачи. – aahhaa

Хорошо, я потерял терпение и в конечном итоге центрирование его с помощью отступов. Но так как это выглядело очень некрасиво на небольших устройствах, я в конечном итоге, используя переменную отступы:

@media (max-width:768px) { 
    .var-padding { 
    padding-top: 0px; 
    } 
} 

@media (max-width:992px) { 
.var-padding { 
    padding-top: 10px; 
    } 
} 

@media (min-width:993px) { 
    .var-padding { 
    padding-top: 100px; 
    } 
}

источник

2015-03-11 21:15:27 hfingler

С немного display: flex;, вы можете вертикальное выравнивание текста по отношению к его ДИВУ :) Вот jsfiddle: http://jsfiddle.net/AndrewL32/9btr6zon/2/

.vert-align { 
    display: flex; 
    align-items: center; 
    vertical-align: middle; 
}

Ps Я использовал конкретную высоту в этом jsfiddle, но вы можете изменить и указать процентную высоту или что-то в соответствии с вашей потребностью позже.

источник

2015-03-11 22:22:52

Центральное содержимое (текст) бутстрапа col вертикально

ответ

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