Question

 .col-sm-6 {
     position: absolute;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
 }

<div class="col-sm-6">
    <img class="img-responsive img-rounded center-block" src="images/test.jpg" alt="">
</div>
<div class="col-sm-6">
    <h2 class="section-header">Title</h2>
    <p class="lead text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

我对CSS较为幼稚，目前正出于我的目的重新安排模板站点。除了我无法使图像在垂直方向上居中相对于另一列的大小之外，我已经按照自己的方式进行了所有工作。这可能吗？

我尝试了一些建议，但还没有走运。感谢您的帮助。

Answer 1

尝试一下：

   .col-sm-6 {
        display: flex;
        align-items: center;
    }

    img {
        height: auto;
    }

如果要水平对齐justify-content: center;，请向父类添加Instant.now

Answer 2

您可以尝试一下。如下设置样式。这样您就可以使图像中心对齐。

<style>
.col-sm-6 .img-responsive img-rounded center-block 
{
    margin: 0 auto;
}
</style>

在列中垂直居中放置图像

2 个答案: