[英]Vertically align text to middle of inline-block
I am trying to get text to vertically align to the middle but can't seem to get it to work. 我正在尝试使文本垂直对齐中间,但似乎无法使其正常工作。
HTML: HTML:
<div class="row">
<div class="col-md-4">
<a href="#" class="custom-button width-100">Login</a>
</div>
<div class="col-md-4">
<a href="#" class="custom-button width-100">Menu</a>
</div>
<div class="col-md-4">
<a href="#" class="custom-button width-100">Contact</a>
</div>
</div>
CSS: CSS:
.custom-button {
color:#ECDBFF;
background-color:#4F0100;
display:inline-block;
height: 220px;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
text-decoration:none;
}
.width-100 {width: 100%;}
I have googled quite a bit and tried a couple of things but i can't seem to get the text to go to the middle. 我用Google搜索了不少,并试图一对夫妇的事情,但我似乎无法得到文本去中间。 can anyone advise what i would need to add/change to get this to work.
谁能建议我需要添加/更改才能使它工作。
If your have a text which is restricted to single line then line-height
would be the best solution. 如果您的文本仅限于单行,那么
line-height
将是最佳解决方案。
try with this 试试这个
line-height:220px; /*height of your container */
You can as well use vertical-align
a pseudo element ( :before
or :after
) and an extra box ( inline-block
) to allow content to wrap on a few lines : see and run snippet below. 您还可以使用
vertical-align
的伪元素( :before
或:after
)和一个额外的框( inline-block
)来允许内容换行:请参见下面的代码段。
.custom-button { color: #ECDBFF; background-color: #4F0100; display: inline-block; height: 220px; font-family: Verdana, Geneva, sans-serif; font-size: 20px; font-weight: bold; text-align: center; text-decoration: none; } .width-100 { width: 100%; } .custom-button:before { display:inline-block; content:''; height:220px; vertical-align:middle; margin:-0 -0.25em;; } a span {display:inline-block; vertical-align:middle; }
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/> <div class="row"> <div class="col-md-4 col-xs-4"> <a href="#" class="custom-button width-100">Login</a> </div> <div class="col-md-4 col-xs-4"> <a href="#" class="custom-button width-100">Menu</a> </div> <div class="col-md-4 col-xs-4"> <a href="#" class="custom-button width-100"><span>Cont<br/>act</span></a> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.