在 div 宽度问题内垂直对齐引导程序中的一行答案

【问题标题】：Vertically align a row from bootstrap inside a div width issue在 div 宽度问题内垂直对齐引导程序中的一行
【发布时间】：2015-08-13 14:11:55
【问题描述】：

尝试将引导行及其内容置于 div 的中心。代码如下：

HTML：

<div class="horizontal-layout">
<div class="row">
    <div class="col-md-3">
        <div class="packet-icon">
            <img src="~/Content/Images/Icons/ic_coversheet_blue.png" style="height:100px; width:100px; cursor:pointer;">
            <h4>Add</h4>
        </div>

    </div>
    <div class="col-md-3">
        <div class="packet-icon">
            <img src="~/Content/Images/Icons/ic_onepager_pink.png" style="height:100px; width:100px;cursor:pointer ">
            <h4>Add</h4>
        </div>
    </div>
    <div class="col-md-3">
        <div class="packet-icon">
            <img src="~/Content/Images/Icons/ic_user_profile_green.png" style="height:100px;width:100px;cursor:pointer ">
            <h4>Add</h4>
        </div>
    </div>
    <div class="col-md-3">
        <div class="packet-icon">
            <img src="~/Content/Images/Icons/ic_create_packet.png" style="height:100px; width:100px;cursor:pointer">
            <h4>View</h4>
        </div>
    </div>
</div>

CSS：

 .horizontal-layout {
    /*background-color: blue;*/
    min-height: 700px;
    border: 1px solid;
    border-radius: 5px;
    border-color: #F26631;
    padding: 30px;
}

.packet-icon {
    text-align: center;
    border: 1px solid;
    border-radius: 5px;
    border-color: #F26631;
    min-height: 140px;
    min-width: 140px;
}

结果：

但是当我对父 div(horizontal-layout) 进行更改显示为 flex 并且子 div 为 align-middle 时，我的行宽发生了变化。

Css 更改后：

.horizontal-layout {
    /*background-color: blue;*/
    min-height: 700px;
    border: 1px solid;
    border-radius: 5px;
    border-color: #F26631;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .horizontal-layout > div {
    display: inline-block;
    vertical-align: middle;
    }

输出：

谁能修复有问题的行？

【问题讨论】：

你试过margin: 0 auto;吗？
是的，我试过了。那也没用。
你能提供一个jsfiddle吗？

标签： css twitter-bootstrap width vertical-alignment

【解决方案1】：

默认情况下，div 为 display: block，因此宽度自动为 100%。

将.horizontal-layout > div 指定为display: inline-block 更改了该行为，因此如果要保留该行为，则必须手动设置宽度：

.horizontal-layout > div {
    ...
    width: 100%;
}

【讨论】：