在按钮中垂直居中对齐文本

迈克尔·麦克古克

我想将按钮中的两组文本垂直居中对齐。我该怎么做呢?

我的演示: http : //jsfiddle.net/fc6317ne/

a.block {
  color: #ffffff;
  background: #F0F0F0;
  font-size: 0.8rem;
  height: 60px;
  text-align: center;
  text-decoration: none;
  width: 30%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
  vertical-align: middle;
}
<a href="" class="block active">Button</a>

<a href="" class="block active">Button That Has More Words</a>

奈姆·谢赫(Naeem Shaikh)

您可以display:table在锚点上使用属性,然后将文本包裹在一个范围内,并将其显示为table-cell,并使范围在中间垂直对齐。

您无需为此调整行高或填充小提琴

a.block {
  color: #red;
  background: #F0F0F0;
  font-size: 0.8rem;
  height: 60px;
  text-align: center;
  text-decoration: none;
  width: 30%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  display: table;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<a href="" class="block active"><span>Button</span></a>

<a href="" class="block active"><span>Button That Has More Words</span></a>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使文本在按钮中垂直居中

来自分类Dev

文本对齐中心不在按钮中居中文本

来自分类Dev

在按钮中居中unicode文本

来自分类Dev

Android ADT在按钮中对齐文本

来自分类Dev

如何在按钮中对齐文本

来自分类Dev

如何在按钮中对齐文本

来自分类Dev

在按钮选项中对齐大文本

来自分类Dev

使用垂直对齐将div中的按钮垂直居中

来自分类Dev

文本垂直居中对齐CSS

来自分类Dev

Bootstrap文本垂直居中对齐

来自分类Dev

更改背景颜色时,使文本居中显示在按钮中

来自分类Dev

如何在<span>中垂直居中对齐文本?

来自分类Dev

Outlook中的垂直文本对齐未居中[带有图片]

来自分类Dev

在div元素中居中水平和垂直对齐文本

来自分类Dev

Outlook中的垂直文本对齐方式未居中[含图片]

来自分类Dev

如何在OneNote的表格中垂直居中对齐文本

来自分类Dev

导航中的文本在垂直中间居中对齐

来自分类Dev

如何在div中居中和垂直对齐文本?

来自分类Dev

在div元素中居中水平和垂直对齐文本

来自分类Dev

在按钮上水平和垂直地仅将图标(也不能文本)居中

来自分类Dev

使用CSS将按钮中的多行文本居中对齐

来自分类Dev

居中对齐按钮文本在div中动态吗?

来自分类Dev

为什么按钮中的文本总是垂直居中?

来自分类Dev

垂直居中文本,右对齐图像

来自分类Dev

如何使div中的文本水平居中,左侧图像垂直居中对齐

来自分类Dev

如何在jQuery对话框内的两个按钮之间使文本垂直居中对齐?

来自分类Dev

在Bootstrap 3警报中垂直对齐文本和按钮

来自分类Dev

在Bootstrap 3警报中垂直对齐文本和按钮

来自分类Dev

使文本停留在垂直进度栏中+垂直对齐:居中

Related 相关文章

热门标签

归档