我在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 并特别看一下最后一行。
我已经尝试调整填充,但由于右列的内容具有可变高度,这似乎不是一个好的解决方案。我通常使用的线高调整似乎因类似原因而失败。
关于如何垂直居中两列内容的任何想法,给定它的行高(行高由列或特定行中的内容高度决定)?
答案 0 :(得分:8)
垂直居中的基于浮动的内容非常有问题。有一些黑客可以做到这一点(使用转换或负底边距),但使用显示表或flexbox进行布局要容易得多。
将行更改为Flexbox,如下所示:
height
请务必从.va
中移除{{1}}!通常,您不应该在CSS中设置容器的高度;这样做只会引入一大堆其他问题。
如需更多选项,请查看http://howtocenterincss.com/。要掌握Flexbox,请查看有关CSS技巧的out this文章。要真正掌握所有这些事情以及它们如何协同工作(无耻的插件警报),请结帐my book。
答案 1 :(得分:0)
我将 purrr::imap(l1, ~{
if(.y == 'a') out1 <- TRUE
if(.y == 'b') out1 <- FALSE
out1
})
#$a
#[1] TRUE
#$b
#[1] FALSE
添加到我的 align-items-center
类中。
示例:
row
示例来自 Bootstrap 文档 here