我正在尝试在div
内对齐文字。我在SoF上阅读了4个主题,所有这些主题都建议使用vertical-align
属性。就我而言,它不起作用。
.free {
display: inline-block;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
color: #ff0000;
background: #ffffff;
border: dashed #ff0000 2px;
width: 105px;
height: 46px;
font-size: 1.07rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 0;
}
.free p {
vertical-align: middle;
}
<div class="free">
<p>Text</p>
</div>
答案 0 :(得分:1)
请尝试以下操作: Demo
在你的css中添加以下代码
.free {
line-height:46px;
}
.free p {
background-color:#ccc;
padding:0; margin:0;
}
希望这有帮助!
答案 1 :(得分:1)
这是因为您使用的是display: inline-block;
而不是display: table;
。检查以下内容:
.free {
display: table;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
color: #ff0000;
background: #ffffff;
border: dashed #ff0000 2px;
width: 105px;
height: 46px;
font-size: 1.07rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 0;
}
.free p {
vertical-align: middle;
}
&#13;
<div class="free">
<p>Text</p>
</div>
&#13;