Question

我想找到一个解决方案，在桌面视图（大于col-sm）中，index_img类中的响应图片在与index_shortdescription文本相关的中心对齐中是垂直的。我尝试了更多解决方案，但我找不到答案。

实施例 JSBIN

<div class="postbox" data-page-url="/">
    <h2 class="index_title"><a href="/blog/post/sandisk-ultra-fit">SanDisk Ultra Fit 32GB</a></h2>
    <div class="row">
        <div class="col-sm-4 index_img"><a href="/blog/post/sandisk-ultra-fit">
            <img src="/content/img/index/sandisk-compressor.png" class="img-responsive center-block" alt="SanDisk Logo"></a>
        </div>
        <div class="col-sm-8 index_shortdescription"><p>VERY LONG TEXT</p></div>
    </div>  
</div>

Answer 1

添加以下css：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

然后更改＆＃34;行＆＃34; class to＆＃34; row-eq-height＆＃34;并添加一个style =＆＃34; verical-align：center＆＃34;

<div class="postbox" data-page-url="/">
    <h2 class="index_title"><a href="/blog/post/sandisk-ultra-fit">SanDisk Ultra Fit 32GB</a></h2>
    <div class="row-eq-height">
        <div class="col-sm-4 index_img" style="verical-align:center" ><a href="/blog/post/sandisk-ultra-fit">
            <img src="/content/img/index/sandisk-compressor.png" class="img-responsive center-block" alt="SanDisk Logo"></a>
        </div>
        <div class="col-sm-8 index_shortdescription"><p>VERY LONG TEXT</p></div>
    </div>  
</div>

Bootstrap响应图像垂直中心

1 个答案: