Question

在蓝框中垂直居中显示文字的最佳方法是什么？

标记：

<div class="btn-blue">
  <span class="icon"></span>
  Some awesome text here
</div>

和样式：

.btn-blue {
  background-color: #446598;
  color: #fff;
  display: inline-block;
  padding: 0 20px 0 0;
  line-height: 0;
}

.btn-blue .icon {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #00356b;
  margin-right: 10px;
}

这是小提琴 http://jsfiddle.net/fSa6r/

感谢。

Answer 1

将line-height: 50px;添加到.btn-blue类和

vertical-align: middle;到图标类

<强> FIDDLE

当只需要一行文字时，我发现将行高设置为框的高度是垂直居中文本的最简单方法。

Answer 2

有很多方法可以垂直对齐文字，您可以在此处查看：http://www.vanseodesign.com/css/vertical-centering/

我个人最喜欢的是使用CSS表格（不是html表格）：

html：

<div id="parent">
  <div id="child">Content here</div>
</div>

css：

#parent {display: table;}

#child {
  display: table-cell;
  vertical-align: middle;
}

Answer 3

这是另一种将链接显示为带图标的按钮的方法。您可以使用精灵来改进此代码，而不是两个分开的图像：

a.mybutton { 
    padding: 3px 0px 3px 30px; 
    color: #c00; 
}

a.mybutton:link, 
a.mybutton:visited, 
a.mybutton:active { 
    background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_off.png") left center no-repeat; 
}
a.mybutton:hover { background: #fff url("https://dl.dropboxusercontent.com/u/59816767/assets/map-pin_on.png") left center no-repeat; }

以下是： fiddle

将文本与css垂直对齐

3 个答案: