Question

<div class="col-md-3 image-container">
    <img class="image" src="path-to-my-image">
</div>
<div class="col-md-9 dynamic-text-container">
    <p><!-- Dynamic text here --></p>
</div>

我在我的项目中使用bootstrap 3。如何在具有可变高度的div内垂直居中图像（WITH CSS TABLE CENTERING）？这是一个演示： http://www.bootply.com/7rSVv7uDBu

Answer 1

Jsfiddle Demo

修改后的CSS

.card{ 
  display:table; 
} 
.image-container,
.dynamic-text-container{ 
  display:table-cell; 
  vertical-align:middle; 
}

.image-container {
    width:25%; /* or some other value */
}


.image-container img {
    display: block;
    margin:0 auto;
}

Answer 2

看看这个：

<强> HTML：

<div class="col-md-3 image-container">
    <img class="image" src="image.png" height="200px;" width="200px" />
</div>
<div class="col-md-9 dynamic-text-container">
    <p>Some text....</p>
</div>

<强> CSS：

.image-container {
    height: 600px;
    text-align: center;
}
.image {
    position: relative;
    top: 50%;
    margin-top: -100px; /* half of image height */
}

DEMO HERE

如何在具有动态内容的div（具有可变高度）内垂直居中已知尺寸的图像？

2 个答案: