垂直引导一个引导列的内容（文本） [英] Center content (text) of a bootstrap col vertically

问题描述

我已经看到了超过10个stackoverflow问题和他们的答案，目前为止还没有工作。

我在bootstrap col中有文本，但它只是位于列的顶部。我需要它是居中的，最好是以图像为中心。

我使用的是媒体对象，但对于较小的设备看起来不太好。

>

这是我的：

 < div class =container > 
< div class =row> 
< div class =col-md-5> 
 ... img stuff .. 
< / div> 
 
< div class =col-md-7 left-padding-30style =height：500px; border：1px solid red;> 
< h2 class =featurette-heading> 
第一个标题
< span class =text-muted>将抓住你的眼睛< / span> 
< / h2> 
< p class =lead> Mussum ipsum cacilds，vidis litro abertis。 Consetis adipiscings elitis。 < / p为H. 
< / div> 
< / div> 
  

输出：

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

I已将手动设置为500px以尝试对齐内容。有没有什么方法可以在将内容集中到更大的屏幕上时将其删除？另外一个问题，图像使用img-circle和img-resposive，但它不是调整大小的屏幕，我可以解决这个问题吗？

编辑：
作为一个占位符解决方案，我将col的填充顶部设置为大约150px 。

解决方案

使用 display：flex; 可以垂直对齐你的文本相对于它的div :)这是一个jsfiddle： http://jsfiddle.net / AndrewL32 / 9btr6zon / 2 /

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

P.s。我在这个jsfiddle中使用了一个特定的高度，但你可以根据你的需要更改和指定一个百分比高度。

I've seen over 10 stackoverflow questions and their answers, none have worked so far.

I have text inside a bootstrap col, but it just sits at the top of the col. I need it to be centered, preferably centered in relation to the image.

I was using the media object, but it did not look good for smaller devices.

This is what I have:

<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>

Output:

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

I've set the height manually to 500px to try aligning the content. Is there any way I can remove it while still centering the content for bigger screens?

Extra question, the image is using img-circle and img-resposive, yet it's not resizing for smaller screens, can I fix this?

Edit: As a "placeholder" solution, I set the padding-top of the col to around 150px.

解决方案

With a little bit of display: flex;, you can vertically align your text with respect to it's div :) Here is a jsfiddle: http://jsfiddle.net/AndrewL32/9btr6zon/2/

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

P.s. I used a specific height in this jsfiddle but you can change and specify a percentage height or something according to your need later.

这篇关于垂直引导一个引导列的内容（文本）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！