不显示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垂直居中于field-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您是否可以使用Image定义自己的样式，而不使用它。例如：

<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 {

}

Answer 2

• 如果我的问题是正确的，那么，简单地说，

将img标记放在div中，给div设置与图像相同的高度，因此，如果图像在div内部，则无关紧要。它总是显示为一个块，因此不会崩溃

好的，第一次，我采取了其他方式，我认为有3个div，对不起。 这是小提琴链接：

enter code here

http://jsfiddle.net/happy2deepak/6U3kw/1/