css - 在 div 宽度问题中垂直对齐 bootstrap 中的一行

Question

尝试将 Bootstrap 行居中，并将其内容放在 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(水平布局)显示为 flex 并将子 div 更改为居中对齐时，我的行宽会发生变化。

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

输出:

任何人都可以修复有问题的行吗？

Answer 1

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

指定 .horizo​​ntal-layout > div 到 display: inline-block 改变了那个行为，所以如果你想保持那个，你必须手动设置宽度:

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