Question

请参阅下面的代码，图片和文字都位于div中。如何使用纯css垂直对齐中间，包括<a>内的图像（div_a）和文本（div_txt），并保持div可点击（具有交叉浏览器兼容性的首选解决方案）：

<style type="text/css">
  a.div_a {
      display:block;
      width:320px;
      height:160px;
      background-color:#CCC;}
</style>

<a href="www.mydoamin.com" class="div_a">
  <img src="http://jsfiddle.net/img/logo.png" style="float:left; margin-right:10px; background-color:#666;" />
  <span class="div_txt">Content</span>
</a>

我尝试了以下内容，但这没有帮助：

.div_txt {vertical-align:middle;}

我在上面找到了图像/文本的分离解决方案，但两者都没有。

Answer 1

取自Vertical-align image并略有改动以考虑<a>（jsFiddle demo）：

链接的额外标记

a.absoluteCenterWrapper {
 display:block;
}

CSS

.absoluteCenterWrapper {
 position:relative; /* Contains the image in the div */
}

/* Positioning */
.absoluteCenter {
 margin:auto; /* Required */
 position:absolute; /* Required */
 top:0;bottom:0; /* Aligns Vertically */
}

/* Sizing - resizes down to avoid cutting off */
.absoluteCenter { /* Fallback Sizing */
 max-height:100%;
 max-width:100%;
}

HTML

<a href="http://www.example.com/" class="absoluteCenterWrapper">
 <img src="PATHTOIMAGE" class="absoluteCenter">
 <p>Paragraph goes here.</p>
</a>

Answer 2

将display: table提供给您的锚元素，然后将每个图片包裹起来并跨越.wrapper范围，并使用以下属性：

.wrapper {
  display: table-cell;
  vertical-align: middle;
}

<强> HTML：

<a href="www.mydoamin.com" class="div_a">
  <span class="wrapper">
    <img src="http://jsfiddle.net/img/logo.png" style="background-color:#666;" />
  </span>

  <span class="wrapper">
    <span class="div_txt">Content</span>
  </span>
</a>

请参阅DEMO。

请注意，此方法在IE7中不起作用，因此如果需要IE7支持，则必须使用更复杂的方法。

可点击的div，中间垂直对齐的图像和文本

2 个答案:

链接的额外标记

CSS

HTML