CSS在div中添加带有文本的图像垂直中心答案

【问题标题】：CSS add a image vertical center with text in a divCSS在div中添加带有文本的图像垂直中心
【发布时间】：2014-01-31 23:33:02
【问题描述】：

我尝试将图像与链接中的文本对齐。到目前为止，我一直使用背景图像来完美地使文本图像居中

CSS

.label  { 
margin: 0 0 0 15px;
padding: 0;
color: #fff;
}

a.moreinfo {
background: url(../images/gallery/add.png) no-repeat left center;
cursor: pointer; 
}

HTML

<a class='moreinfo'><span class='label'>MORE INFO</span></a>

现在我想尽量不使用背景图片，而是在 html 代码 (img src) 中插入图片。我尝试使用垂直对齐：中间，但图像没有像背景中的那样精确对齐。我怎么能用包含在 html 代码中的图像来获得同样的东西？谢谢

【问题讨论】：

标签： css

【解决方案1】：

以下是如何将一个元素置于另一个元素的中心：

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

您可以在此链接中找到更多信息：http://blog.themeforest.net/tutorials/vertical-centering-with-css/。

【讨论】：

【解决方案2】：

我发现这样的东西非常适合我：

a.更多信息{ 显示：表格；宽度：100%； } a.moreinfo 跨度，a.moreinfo img { 显示：表格单元格；垂直对齐：中间；宽度：50%；浮动：无； }

在将显示设置为表格时垂直对齐时，浮动元素将无法按预期工作。父级应该有一个设置的宽度，否则默认宽度将设置为自动，并且再次无法按预期工作。

【讨论】：

这是一个很好的解决方案，但是如果图像比文字小（高度）是一个大问题。