Question

我已经审核了所有现有的问题/答案，但仍然无法获得有效的解决方案，所以我感谢您对我的特定代码的任何评论。

我不想在我的代码中使用硬编码图像大小（像素数），我愿意在解决方案中使用Less，CSS或Javascript的组合。

图像应在Bootstrap列中垂直和水平居中，并且即使在调整屏幕大小时也保持居中。

我的HTML：

<div class="container-fluid">
    <div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="panel">
                Some content
            </div>
        </div>

        <div class="col-md-2">
            <img src="images/myimage.png" class="img-responsive center-block">
        </div>

        <div class="col-md-5">
            <div class="panel>
               Some content
            </div>
        </div>
     </div>
     </div>
 </div>

Answer 1

这是使用transform的选项：

html,body,.container-fluid,.container,.row,.row div {height:100%;;} /* full height for demo purposes */
.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.col-md-2 {background-color:#ccc;} /* just to demonstrate the size of column */

http://www.bootply.com/YG8vpg1rIf

Answer 2

您可以使用css Flexbox 克服垂直对齐问题。

将类“vertical_center”添加到父div。

然后添加以下css

.vertical_center {
    display: flex;
    align-items: center;
}

Answer 3

希望这能解决您的问题。使用以下CSS属性使图像垂直居中 img {垂直对齐：中间； } 对于水平对齐，请使用bootstrap的类名text-center以及div的其他类名（如果有）。喜欢，

...

。它将使div的内容水平居中。

在引导列中垂直居中响应图像

3 个答案: