Html <a> 元素内的文本位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10525548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text position inside <a> element
提问by user1752759
This is what my current code looks like:
这是我当前的代码的样子：
HTML:
HTML：
<a class="button" href="#">Read More</a>
CSS:
CSS：
.button {
background:url('../images/btn_bg.jpg') repeat scroll 0% 0%;
font: 12px Helvetica, Arial, sans-serif;
color: #FFF;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
text-decoration: none;
cursor: pointer;
border: none;
min-width: 87px;
min-height: 29px;
float: right;
margin-top: 14px;
padding-top: 4.25px;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.button:hover {
background: url('../images/btn_over.jpg') repeat scroll 0% 0%;
}
Result:
结果：
Firstly, the column that this is all wrapped in has a margin-bottom: 14px. This creates the spacing from the column and the two horizontal lines below it. This is so if the user wanted to take the button out all together, the text inside the column would still meet 14px shy from the two lines below.
首先，这一切都包含在其中的列有一个margin-bottom: 14px. 这将创建与列及其下方两条水平线的间距。因此，如果用户想将按钮一起取出，列内的文本仍会与下面两行相距 14 像素。
As you can see the text for the .buttonis aligned to the middle by using the css paddingproperty and text-align: center.
There is a margin-top: 14pxon the button which gives the same spacing above the button as under it.
如您所见.button，使用 csspadding属性和text-align: center. margin-top: 14px按钮上有一个，按钮上方和下方的间距相同。
However, what I am finding is that by using the paddingelement for the text inside the button, it affects the distance around it (in this case, the space below the button which is meant to be 14px, is now bigger than what it should be).
但是，我发现通过将padding元素用于按钮内的文本，它会影响它周围的距离（在这种情况下，按钮下方的空间本应为 14 像素，现在比应有的空间大）。
Question:
题：
Is there a way to vertically align the text within the .buttonwithout using the padding property as I have tried vertical-align, position, float and a few others but to no success without changing the space above or below the box...what is the best way to go about this and if possible, an alternative way to just using an image instead?
有没有一种方法可以在.button不使用填充属性的情况下垂直对齐文本，因为我已经尝试过垂直对齐、位置、浮动和其他一些方法，但是如果不更改框上方或下方的空间，则没有成功……这是什么解决这个问题的最佳方法，如果可能的话，还有一种替代方法来代替使用图像？
Any help would be greatly appreciated. http://jsfiddle.net/9xpfY/
任何帮助将不胜感激。http://jsfiddle.net/9xpfY/
回答by Michael Zaporozhets
There are two ways you can do this, however without javascript both of these methods require absolute heights although the second option works relative to the paddingyou have set.
有两种方法可以做到这一点，但是如果没有 javascript，这两种方法都需要绝对高度，尽管第二个选项相对于padding您设置的高度有效。
The first, an obvious choice is the use of line height.
This works by setting the height of the line of text to a value, and because text is already natively vertically aligned to the center of the line-height you get the effect you are looking for.
adding the line
line-height : 27px;to.button {will give you your desired result.
首先，一个明显的选择是使用行高。
这是通过将文本行的高度设置为一个值来实现的，并且因为文本本身已经与行高的中心垂直对齐，因此您可以获得所需的效果。
添加行
line-height : 27px;到.button {会给你你想要的结果。
The second way is to wrap the text inside the element in a span tag and set the
bottomproperty tobottom: -6.75px;Your button element would look like this
<a class="button" href="#"><span id="buttontext">Read More</span></a>and you would add this line to your css:
#buttontext {position: relative; bottom: -6.75px;}
第二种方法是将元素内的文本包裹在span标签中，并将
bottom属性设置为bottom: -6.75px;你的按钮元素看起来像这样
<a class="button" href="#"><span id="buttontext">Read More</span></a>您可以将此行添加到您的 css 中：
#buttontext {position: relative; bottom: -6.75px;}
REFERENCES
参考
回答by MK_Dev
You want to use "line-height" style to specify the line height of the text inside. Keep in mind this may also change the height of the element in some cases (when line-height is larger than element's min-height, for example). See this: http://jsfiddle.net/VvnhJ/
您要使用“line-height”样式来指定里面文本的行高。请记住，在某些情况下，这也可能会更改元素的高度（例如，当 line-height 大于元素的 min-height 时）。看到这个：http: //jsfiddle.net/VvnhJ/
回答by wheresrhys
Set line-heightto the same value as the button's height
设置line-height为与按钮相同的值height
回答by zhujy_8833
I think one thing you can do is to use line-height attribute. Try this out:
我认为您可以做的一件事是使用 line-height 属性。试试这个：
.button{
line-height : 27px;
}
