垂直居中在一个内联块中的文本 [英] Vertically centering text within an inline-block
问题描述
我尝试使用样式超链接为网站创建一些按钮。我设法得到按钮看起来我想要什么,一个轻微的问题。我无法获得文本(下面的源代码中的链接)垂直居中。
不幸的是,可能有多行文本,第二个按钮,所以我不能使用 line-height
垂直居中。
我的初始解决方案是使用 display:table-cell;
而不是 inline-block
,并排除Chrome,Firefox和Safari中的问题,不是在Internet Explorer中,所以我认为我需要坚持inline-block。
如何垂直中心的链接文本在 57px
x 100px
inline-block
?提前感谢。
CSS:
.button {
background-image:url(/images/categorybutton-off.gif);
color:#000;
display:inline-block;
height:57px;
width:100px;
font-family:Verdana,Geneva,sans-serif;
font-size:10px;
font-weight:bold;
text-align:center;
text-decoration:none;
vertical-align:middle;
}
.button:hover {
background-image:url(/images/categorybutton-on.gif);
}
.button:before {
content:点击这里For\;
font-style:italic;
font-weight:normal!important;
white-space:pre;
}
HTML: b
< a href =/class =button> Link< / a>
< a href =/class =button> Link< br />更多详情< / a>
$ b pre>
< a href =...class =button>
< span class =centerer>< / span>
< span class ='Centered'>链接< / span>
< / a>
CSS
.Centered
{
vertical-align:middle;
display:inline-block;
}
.Centerer
{
display:inline-block;
height:100%;
vertical-align:middle;
}
看看这里: http://jsfiddle.net/xVnQ6/
I'm trying to create some buttons for a website using styled hyperlinks. I have managed to get the button looking how I want, bar one slight issue. I can't get the text ('Link' in the source code below) to vertically center.
Unfortunately there may be more than one line of text as demonstrated with the second button so I can't use line-height
to vertically center it.
My initial solution was to use display: table-cell;
rather than inline-block
, and that sorts the issue in Chrome, Firefox and Safari but not in Internet Explorer so I'm thinking I need to stick to inline-block.
How would I go about vertically centering the link text within the 57px
x 100px
inline-block
, and have it cater to multiple lines of text? Thanks in advance.
CSS:
.button {
background-image:url(/images/categorybutton-off.gif);
color:#000;
display:inline-block;
height:57px;
width:100px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
text-align:center;
text-decoration:none;
vertical-align:middle;
}
.button:hover {
background-image:url(/images/categorybutton-on.gif);
}
.button:before {
content:"Click Here For\A";
font-style:italic;
font-weight:normal !important;
white-space:pre;
}
HTML:
<a href="/" class="button">Link</a>
<a href="/" class="button">Link<br />More Details</a>
Wrap your text with a span (Centered), and write another empty span just before it(Centerer) like this.
HTML:
<a href="..." class="button">
<span class="Centerer"></span>
<span class='Centered'>Link</span>
</a>
CSS
.Centered
{
vertical-align: middle;
display: inline-block;
}
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}
Take a look here: http://jsfiddle.net/xVnQ6/
这篇关于垂直居中在一个内联块中的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!