在 div 中垂直对齐文本的最佳做法是啥? [复制]
Posted
技术标签:
【中文标题】在 div 中垂直对齐文本的最佳做法是啥? [复制]【英文标题】:What is the best practice to vertical align text within a div? [duplicate]在 div 中垂直对齐文本的最佳做法是什么? [复制] 【发布时间】:2015-10-28 11:56:59 【问题描述】:我正在努力尝试垂直对齐我的一个文本字段。
我希望我的章节名称Integers and the Coordinate Plane
位于我的红线中间。
我试过使用垂直对齐,但我可能用错了。
有人可以解释一下吗?
Fiddle
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>
少
.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;
【问题讨论】:
与.col-xs-8.col-sm-10.col-md-10.col-lg-11.no-padding margin-top: 20px;
一起使用。
@somethinghere - 为什么text-align: center
会垂直居中?
@somethinghere:我知道text-align:center
我想垂直对齐。在发表评论之前你有没有看过我的帖子?
他的评论甚至还获得了 1 票支持。我很惊讶。
文字和行不一样。请保持问题开放。它将帮助遇到相同问题并正在搜索“line”而不是“text”的人。
【参考方案1】:
试试这个
.ch-d-name
line-height:70px; //added this.
font-size: 23px;
vertical-align: middle;
Demo here
【讨论】:
【参考方案2】:您可以使用不同的技术,我认为它们同样有效。
1)如果你知道父母的身高,只需使用line-height: "parent height"
2)如果你不知道父级的高度,但你可以随意设置行高,那么你可以这样做:line-height: 20px; margin-top: calc(50% - 10px);
3) 垂直对齐的表格布局。
4) 带有对齐项的 Flex 布局:居中
【讨论】:
【参考方案3】:vertical-align
不会像您预期的那样以这种方式工作。
在这种情况下,您可以使用边距或行高来对齐标题。如果您想要一个更可重用的版本,值得阅读this article 关于绝对垂直定位。
http://codepen.io/anon/pen/xGMrze?editors=110
.ch-d-name
font-size: 23px;
margin-top: 20px;
【讨论】:
以上是关于在 div 中垂直对齐文本的最佳做法是啥? [复制]的主要内容,如果未能解决你的问题,请参考以下文章