我有一个 div,其中包括:
<div class="field-content">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
在某些情况下,这个字段内容根本没有 img-tag。然后我希望 tile_content 垂直居中于字段内容。 当 img-tag 存在时,图像位于字段内容的顶部,tile_content 位于图像下方。
这证明了这两种情况。在第一个中有 图像和图像下的 tile_content。在第二个中只有 tile_content - 根本没有 img。
有什么想法/技巧可以让这项工作成功吗?
我的 CSS:
.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;
.tile_content {
}
最佳答案
您唯一需要知道的是 div 的垂直居中。这个问题已经在这里解决了:
How to vertically center a div for all browsers?
您可以将 has-image
类添加到 .field-content
中,您是否可以为带图像和不带图像的 block 定义自己的样式。例如:
<div class="field-content has-image">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
所以你的 CSS 看起来像
.field-content.has-image {
}
关于html - 未显示 img 标签时垂直居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24991350/