Question

我正在一个bootstrap项目中工作，我需要一些文本与另一行垂直居中。显然，这两行的大小不同，因此内容大小不同。有没有办法解决这个问题而不升级到flexbox或这是要走的路？我也希望保持响应能力。

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 col-xs-12">
        <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
    </div>
    <div class="col-lg-6 col-xs-12">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

Answer 1

您可以使用Flexbox和media queries执行此操作。

对于flexbox，您可以在父元素上使用display: flex和align-items: center，在这种情况下，这将是row。

现在您只需要将媒体查询中的min-width调整为与引导断点相同所以例如，如果您使用的是col-sm-6引导类，那么 768px 是断点，您将在媒体查询中使用@media(min-width: 768px) { }。

对于col-sm-，您可以使用@media(min-width: 768px) Fiddle
对于col-md-，您可以使用@media(min-width: 992px) Fiddle
对于col-lg-，您可以使用@media(min-width: 1200px) Fiddle

@media(min-width: 768px) {
  .flex {
    display: flex;
    align-items: center;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row flex">
    <div class="col-sm-6">
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive" />
    </div>
    <div class="col-sm-6 text-center">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

您可以使用 CSS表进行垂直对齐，而不是Flexbox，您还必须使用与flexbox相同的引导断点调整查询。使用表格时，您必须从float: none的列中移除浮动才能获得垂直对齐。

@media(min-width: 768px) {
  .row.display_table {
    display: table;
  }
  
  .col-sm-6.left_cell, .col-sm-6.right_cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
  
  img {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row display_table">
    <div class="col-sm-6 left_cell">
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive" />
    </div>
    <div class="col-sm-6 right_cell text-center">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

Answer 2

我不想太简单，但你想知道flexbox是否可行。实际上，就在这个时候。

文本容器背后的原因是，如果您不想，您不需要使用text-align:center;将文本居中，但它仍然是水平居中的。

＆＃13;

body {
  padding: 2em;
}

@media (min-width: 1200px) {
  .vcenter {
    display: flex;
    align-items: center;
  }

  .text {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row vcenter">
    <div class="col-lg-6 col-xs-12 ">
        <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
    </div>
    <div class="col-lg-6 col-xs-12">
      <div class="text">
        <p>This is some text some te xt some more text</p>
        <p>This is some text some text some more text</p>
        <p>This is some text some text some more text</p>
        <p>This is some text some text some more text</p>      
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

您可以创建一个具有相对位置的div，如：

<div style='position: relative; top: 50%; transform: translateY(50%); height:100%;'>

封装所有<p>标记并对齐中间。有许多方法，如（http://vanseodesign.com/css/vertical-centering/）：

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

但内联元素效果不佳。请注意，我将col-lg-6更改为col-sm-6，因为在codepen中您可以看到2列。

从这里提取：https://davidwalsh.name/css-vertical-center

这是一个有效的代码：http://codepen.io/jpaulet/pen/bpRvyd?editors=1100

希望它有所帮助！

响应式引导网格中内容的垂直和水平居中

3 个答案: