我正在尝试将文本垂直对齐到其父容器的中心,但是它比中心向下对齐。
这是小提琴:https : //jsfiddle.net/xrvo6txq/1/
CSS:
.caret-right {
position: relative;
display: block;
}
.caret-right:after {
position: absolute;
right: 5%;
top: 50%;
display: inline-block;
vertical-align: middle;
transition: .15s;
-webkit-transition: .15s;
-moz-transition: .15s;
font-family: FontAwesome;
content: "\f105"; /* fa-angle-right */
font-size: 1.5em;
}
.caret-right:hover:after {
right: 4%;
}
.box {
border: 1px solid #ccc;
padding: 1em;
}
.align-center {
text-align: center;
}
HTML:
<a class="caret-right" href="#" title="Get Started">
<div class="box">
<p class="align-center">Get started now with <span class="color-theme-a">5 free lessons</span>.</p>
<p class="align-center">No credit card needed</p>
</div>
</a>
添加transform: translateY(-50%);
到您的.caret-right:after
规则:
.caret-right:after {
transform: translateY(-50%);
}
这可以使元素正确偏移其高度的50%,以使插入符号垂直居中:
.caret-right {
position: relative;
display: block;
}
.caret-right:after {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
display: inline-block;
vertical-align: middle;
transition: .15s;
-webkit-transition: .15s;
-moz-transition: .15s;
font-family: FontAwesome;
content: "\f105";
/* fa-angle-right */
font-size: 1.5em;
}
.caret-right:hover:after {
right: 4%;
}
.box {
border: 1px solid #ccc;
padding: 1em;
}
.align-center {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.css" rel="stylesheet" />
<a class="caret-right" href="#" title="Get Started">
<div class="box">
<p class="align-center">Get started now with <span class="color-theme-a">5 free lessons</span>.</p>
<p class="align-center">No credit card needed</p>
</div>
</a>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句