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

当标题居中时，图像正对齐浏览器的左侧。

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

如果您希望这两个元素不是块元素，并且＆＃34;对齐＆＃34;彼此相邻，您必须使用不同的display属性（例如inline或flex）或为元素float property + value。

请查看以下示例或this fiddle;

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: