html - Bootstrap 垂直居中内容在行中

Question

我在 Bootstrap 3 中有一个简单的表格式布局(它是一个“属性网格”):

<div class="row">
  <div class="col-md-3">
    <div id="propGrid">
      <div class="row pgTable">
        <div class="col col-md-12">
          <div class="row pgGroupRow">
            <div class="col col-md-12 pgGroupCell">Editor</div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">Font<span class="pgTooltip" title="The font editor to use">[?]</span></div>
            <div class="col col-md-7 pgCell"><input type="text" id="pg0font" value="Consolas" <="" input=""></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">Font size</div>
            <div class="col col-md-7 pgCell"><span class="ui-spinner ui-corner-all ui-widget ui-widget-content"><input type="text" id="pg0fontSize" value="14" style="width:50px" aria-valuemin="0" aria-valuemax="20" aria-valuenow="14" autocomplete="off" class="ui-spinner-input" role="spinbutton"><a tabindex="-1" aria-hidden="true" class="ui-spinner-button ui-spinner-up ui-corner-tr"></a><a tabindex="-1" aria-hidden="true" class="ui-spinner-button ui-spinner-down ui-corner-br"></a></span></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">Font color</div>
            <div class="col col-md-7 pgCell"><input type="text" id="pg0fontColor" value="#a3ac03" <="" input=""></div>
          </div>
          <div class="row pgGroupRow">
            <div class="col col-md-12 pgGroupCell">Plugins</div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">jQuery<span class="pgTooltip" title="Whether or not to include jQuery on the page">[?]</span></div>
            <div class="col col-md-7 pgCell"><input type="checkbox" id="pg0jQuery" value="jQuery" checked=""></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">modernizr<span class="pgTooltip" title="Whether or not to include modernizr on the page">[?]</span></div>
            <div class="col col-md-7 pgCell"><input type="checkbox" id="pg0modernizr" value="modernizr"></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">Framework<span class="pgTooltip" title="Whether to include any additional framework">[?]</span></div>
            <div class="col col-md-7 pgCell"><select id="pg0framework"><option value="None">None</option><option value="angular" selected="">AngularJS</option><option value="backbone">Backbone.js</option></select></div>
          </div>
          <div class="row pgGroupRow">
            <div class="col col-md-12 pgGroupCell">Other</div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">iHaveNoMeta</div>
            <div class="col col-md-7 pgCell"><input type="text" id="pg0iHaveNoMeta" value="Never mind..." <="" input=""></div>
          </div>
          <div class="row pgRow">
            <div class="col col-md-5 pgCell">I am read only</div>
            <div class="col col-md-7 pgCell"><label for="pg0iAmReadOnly" title="Label types use a label tag for read-only properties">I am a label which is not editable</label></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我一直在尝试将左列的内容相对于右列的高度垂直居中，但没有成功。

查看代码笔 http://codepen.io/anon/pen/rrvNaV并特别查看最后一行。

我试过调整内边距，但由于右栏的内容高度可变，这似乎不是一个好的解决方案。我通常使用的行高调整似乎由于类似原因而失败。

关于如何将两列的内容垂直居中，给定行高(行高由列或特定行中的内容高度确定)的任何想法？

Answer 1

垂直居中基于 float 的内容是非常有问题的。有一些 hack 可以做到这一点(使用转换或负底边距)，但使用显示表或 flexbox 进行布局要容易得多。

像这样将行更改为 flexbox:

.pgRow {
  background:yellow;
  display: flex;  /* make the row a flex container */
  align-items: center; /* vertically center each flex item in the container */
}

请务必从 .va 中删除 height!通常，您不应该在 CSS 中设置容器的高度；这样做只会带来很多其他问题。

有关更多选项，请查看 http://howtocenterincss.com/ .要获得 flexbox 的句柄，请检查 out this关于 CSS 技巧的文章。要真正了解所有这些事情以及它们如何协同工作(无耻的插件警报)，请查看 my book .