What is the best practice to vertical align text within a div?

Question

I'm struggling trying to do vertical align to one of my text field.

I want my chapter name Integers and the Coordinate Plane to place in the middle at my red line.

I've tried to use the vertical align, but I might have use it wrong.

Can someone please shed some lights on this ?

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>

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;
    }
}

Works with `.col-xs-8.col-sm-10.col-md-10.col-lg-11.no-padding { margin-top: 20px; }`. — Abraar Arique Diganto, Aug 05 '15 at 15:47
@somethinghere - Why would `text-align: center` vertically center anything? — j08691, Aug 05 '15 at 15:48
@somethinghere: I know `text-align:center` I want to vertical align. Did you even read my post before leave comment ? — code-8, Aug 05 '15 at 15:49
Text and line are not the same. Please, keep the question open. It will help people who have the same problem and are searching for "line" instead of "text". — Mark, Aug 05 '15 at 21:22

score 4 · Accepted Answer · answered Aug 05 '15 at 15:50

4

Try this

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

Demo here

answered Aug 05 '15 at 15:50

Shrinivas Pai

7,491
4
29
56

score 2 · Answer 2 · answered Aug 05 '15 at 15:50

You can use different techniques, and I think they are equally valid.

1) If you know the height of the parent, simply use line-height: "parent height"

2) If you don't know the height of the parent, but you can set a line height at will then you could do: line-height: 20px; margin-top: calc(50% - 10px);

3) Table layout with vertical-align.

4) Flex layout with align-items: center

score 2 · Answer 3 · answered Aug 05 '15 at 15:52

vertical-align doesn't work in this way, as you might expect.

In this case, you can use margin or line-height to align the header. If you want a more reusable version, it's worth reading this article about absolute vertical positioning.

http://codepen.io/anon/pen/xGMrze?editors=110

.ch-d-name {
    font-size: 23px;
    margin-top: 20px;
}

What is the best practice to vertical align text within a div?

Fiddle

3 Answers3