在按钮中垂直居中对齐文本 [英] Align text centrally vertically in button

查看:77
本文介绍了在按钮中垂直居中对齐文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'd like to align both sets of text in the buttons centrally vertically. How do I do this?

我的演示: 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>

推荐答案

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

You can use display:table property on anchor and then wrap the text inside a span, and display it as table-cell, with vertically aligning the span in middle.

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

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>

这篇关于在按钮中垂直居中对齐文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆