我正在努力尝试垂直对齐我的某个文字字段。
我希望我的章节名称Integers and the Coordinate Plane
放在我的红线中间。
我试图使用垂直对齐,但我可能错了。
有人可以就此发光吗?
HTML
<div class="row chapter-detail">
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-1 no-padding ">
<div class="ch-d-wrapper">
<div class="ch-d-chapter ">CHAPTER</div>
<div class="ch-d-num">6</div>
</div>
</div>
<div class="col-xs-8 col-sm-10 col-md-10 col-lg-11 no-padding ">
<div class="ch-d-name">Integers and the Coordinate Plane</div>
</div>
</div>
LESS
.chapter-detail {
border: solid #c9cacb 1px;
background-color: #F9F9F9;
color: #293644;
margin-bottom: 10px;
margin-left: 3px;
margin-right: 35px;
margin-top: 30px;
line-height: 38px;
.ch-d-wrapper {
text-align: center;
border-right: solid #c9cacb 2px;
}
.ch-d-chapter{
text-transform: uppercase;
font-size: 12px;
}
.ch-d-num {
font-weight: bold;
font-size: 35px
}
.ch-d-name {
font-size: 23px;
vertical-align: middle;
}
}
答案 0 :(得分:4)
试试这个
.ch-d-name {
line-height:70px; //added this.
font-size: 23px;
vertical-align: middle;
}
答案 1 :(得分:2)
您可以使用不同的技术,我认为它们同样有效。
1)如果你知道父母的身高,只需使用line-height: "parent height"
2)如果您不知道父亲的身高,但您可以随意设置行高,那么您可以这样做:line-height: 20px; margin-top: calc(50% - 10px);
3)具有vertical-align的表格布局。
4)使用align-items:center
的Flex布局答案 2 :(得分:2)
vertical-align
不会以这种方式发挥作用。
在这种情况下,您可以使用边距或行高来对齐标题。如果你想要一个更可重用的版本,那么值得阅读关于绝对垂直定位的this article。
http://codepen.io/anon/pen/xGMrze?editors=110
.ch-d-name {
font-size: 23px;
margin-top: 20px;
}