html - 未显示 img 标签时垂直居中 div

Question

我有一个 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 {

}

Answer 1

您唯一需要知道的是 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 {

}