Question

我一直在努力将这张图片正确地放在包含img所在的div的行中。这里是我的HTML

            <div class="row">
            <div class="col-md-9">
                <div class="col-md-12">
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text(2 male, 1 female, 3 mixed characters)</p>
                </div>
            </div>
            <div class="col-md-2">
                <img class="img-full center-block" src="img/img.jpg" alt="">
            </div>
        </div>

我已尝试过此页面上的所有建议，但这些建议似乎都没有效果。 https://css-tricks.com/centering-css-complete-guide/

我不知道元素的高度，因为这是一个响应式网站，所以我尝试使用translate来移动图像，这就发生了。

如果我使用flexbox，那么我的移动设计会中断，因为列不会像这样崩溃。

如果我使用此代码

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}

什么都没发生

所以我觉得我已经筋疲力尽了任何众所周知的解决方案。任何人都知道如何解决这个问题？我觉得我的问题与列中的堆叠列相关联，但如果我不这样做，它也会破坏我的设计......

编辑：这就是我想要的样子

Answer 1

此时您无法垂直对齐图像，因为包含的col-md-2将缩小到图像的高度。您需要确保图像的父元素具有更大的高度值。你可以在你的CSS中静态地将它设置为col-md-9的高度（就像我在代码片段中所做的那样）或者通过javascript动态检查它。然后你可以运行我下面的代码（css将工作IE 9及以上，我还将bootstrap类改为xs以在代码片段中说明）：

＆＃13;

.vcenter {
position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.taller{ height:300px;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
<div class="row">
            <div class="col-xs-9">
              <div class="row">
                <div class="col-md-12">
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text</p>
                    <br>
                    <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                    <p>Text(2 male, 1 female, 3 mixed characters)</p>
                </div>
              </div>
            </div>
            <div class="col-xs-2 taller">
                <img class="img-full center-block vcenter" src="img/img.jpg" alt="">
            </div>
        </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

＆＃13;

这应该适用于JAVASCRIPT版本

＆＃13;

$(document).ready(function(){
   matchColHeight();
});

$(window).resize(function(){
    matchColHeight();
}); 

function matchColHeight() {
  var col1_height = $('.col1').height(); 
  $('.col2').css('height', col1_height);  
}

＆＃13;

.vcenter {
    position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div class="container">
    <div class="row">
                <div class="col-xs-9">
                  <div class="row">
                    <div class="col-md-12 col1">
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
                        <br>
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text</p>
                        <br>
                        <h3 style="text-transform: uppercase"><strong>Title</strong></h3>
                        <p>Text(2 male, 1 female, 3 mixed characters)</p>
                    </div>
                  </div>
                </div>
                <div class="col-xs-2 col2">
                    <img class="img-full center-block vcenter" src="img/img.jpg" alt="">
                </div>
            </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

＆＃13;

Bootstrap - 垂直居中img

1 个答案: