html - 在 div 中垂直对齐文本的最佳做法是什么?

标签 html css twitter-bootstrap less

<分区>

我正在努力尝试对我的一个文本字段进行垂直对齐。

enter image description here

我希望我的章节名称 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;
    }
}

最佳答案

试试这个

 .ch-d-name {
        line-height:70px;  //added this.
        font-size: 23px;
        vertical-align: middle;
    }

Demo here

关于html - 在 div 中垂直对齐文本的最佳做法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31837061/

相关文章:

css - 用于提取页面可见部分中使用的 CSS 的工具

css - 如何对齐左 dl 内容?

javascript - Bootstrap 的轮播 (v2.3.2) 上的动画高度变化

c# - Azure 中的捆绑不适用于 bootstrap 和 jquery、ASP.NET MVC 5

javascript - 页面刷新时随机图像显示顺序

html - html 5 中的 div 不会从 css3 文件中显示

html - CSS:以第二深度隐藏 ul 的第一个列表项

javascript - 是否可以解释放置在 html 标签内的 javascript 代码?

javascript - 使用 css 显示和 JS 将图像替换为另一个图像

css - Bootstrap 4 Card,右侧有下拉菜单