0

在我的蓝色框中垂直居中文本的最佳方法是什么？

标记：

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

谢谢。

4

3 回答 3

2

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

vertical-align: middle;到图标类

小提琴

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

于 2013-06-17T23:51:03.160 回答
1

有很多垂直对齐文本的方法，您可以在这里查看：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;
}
于 2013-06-18T00:03:32.210 回答
1

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

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; }

这是：小提琴

于 2013-06-18T00:43:18.057 回答