[英]Centering all text of <a> as display block, vertically and horizontally
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<style>
#metro {
width: 100%
height: auto;
font-size: 16px;
}
#metro .metro_half_row {
width: 50%;
float: left;
height: 100px;
color: white;
background-color: grey;
}
#metro .metro_half_row a {
display: block;
height: inherit;
text-align: center;
}
</style>
<div id="metro">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
I've wrapper as #metro, .metro_half_row
as each section, using a display: block
我使用
display: block
#metro, .metro_half_row
包装为#metro, .metro_half_row
作为每个部分
Right now the text in <a>
is centered horizontally, but not vertically. 现在,
<a>
的文本水平居中,但不垂直居中。 I need to center the text contained in the links, and each <a>
covering the entire sub div block both horizontally and vertically. 我需要将链接中包含的文本居中,每个
<a>
都将水平和垂直覆盖整个sub div块。
Try: 尝试:
#metro .metro_half_row a {
display: table-cell;
width: inherit;
vertical-align: middle;
height: inherit;
text-align: center;
}
#metro .metro_half_row {
display: table;
}
view http://jsfiddle.net/alemarch/589pqd62/ 查看http://jsfiddle.net/alemarch/589pqd62/
display: table
and display: table-cell
are your friends. display: table
和display: table-cell
是您的朋友。
#metro { width: 100%; height: auto; font-size: 16px; } #metro .table-block { width: 100%; display: table; } #metro .table-cell { width: 50%; display: table-cell; vertical-align: middle; } #metro .metro_half_row { width: 100%; height: 100px; color: white; background-color: grey; display: table; } #metro .metro_half_row a { width: 100%; display: table-cell; height: inherit; text-align: center; vertical-align: middle; }
<link href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" rel="stylesheet" /> <div id="metro"> <div class="table-block"> <div class="table-cell"> <div class="metro_half_row"> <a href="#"> <h1>TEXT1</h1> <h2>TEXT</h2> </a> </div> </div> <div class="table-cell"> <div class="metro_half_row"> <a href="#"> <h1>TEXT1</h1> <h2>TEXT</h2> </a> </div> </div> </div> <div class="table-block"> <div class="table-cell"> <div class="metro_half_row"> <a href="#"> <h1>TEXT1</h1> <h2>TEXT</h2> </a> </div> </div> <div class="table-cell"> <div class="metro_half_row"> <a href="#"> <h1>TEXT1</h1> <h2>TEXT</h2> </a> </div> </div> </div> </div>
If i understand your problem correctly in your case, the CSS may look like this: 如果我根据您的情况正确理解了您的问题,则CSS可能如下所示:
a{
margin-top:25px;
}
or 要么
a{
position: relative;
top: 25%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.