html - 无法获得 Bootstrap 的媒体布局以将图像与居中标题对齐

Question

我正在尝试使用 bootstraps 媒体布局将图像对齐到标题的左侧。发生的事情是图像在浏览器的左侧对齐，而标题居中。我尝试了很多不同的东西，但这是我认为“应该”正确的代码:

<div>
    <!-- some stuff -->
    <div class="text-center form-inline">
        <div class="media">
            <div class="media-left" style="vertical-align: middle">
                <div class="visible-lg">
                    <img data-bind="attr.src: agencyLogo" width="200" height="100"></img>
                </div>
            </div>
            <div class="media-body" style="vertical-align: middle">
                <h1 class="media-heading">My Cool Header</h1>
            </div>
        </div>
    </div>
    <!-- some more stuff -->
</div>

编辑:

来自 Bootstrap 文档:

<div class="media">
    <a class="media-left" href="#">
        <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero,....
    </div>
    </div>
</div>

Answer 1

What is happening is that the image is aligning to the left of the browser while the heading is centered.

发生这种情况的原因是因为您有两个 div 元素，默认情况下它们具有 display值 block 。

如果您希望这两个元素不是 block 元素，而是彼此“对齐”，您必须使用不同的 display 属性(例如 inline 或 flex) 或给元素一个 float property + value .

查看下面的示例或 this fiddle ;

.el1, .el3, .el5 {
    background-color: grey;
}

.el2, .el4 {
    background-color: lightblue;
}

.el1 {
    margin-bottom: 5px;
}

.el2, .el3 {
    display: inline;
}

.el4, .el5 {
    float: left;
    margin-top: 5px;
}

.flexin {
    display: -webkit-flex;
    display: flex;
    margin-top: 5px;
}

.el6, .el7 {
    background-color: orange;
    border-right: 1px solid black;
    -webkit-flex: 1; 
    -ms-flex: 1;   
    flex: 1;
}

/* micro cf */
cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

<div class="el1">I have display block</div>
<div class="el2">I have display inline</div>
<div class="el3">I also have display inline</div>
<div class='cf'>
    <div class="el4">My float value is left</div>
    <div class="el5">My float value is also left</div>
</div>
<div class='flexin'>
    <div class="el6">My parent's display value is flex</div>
    <div class="el7">And our flex value is 1</div>
</div>