Aligning text "on-the-line" e.g. top, bottom middle

Question

Not sure what you actually call the line text is aligned to...

enter image description here

As you can see the aqua colored '100' there has it's top aligned with 'BRANCH', but I'd like it to align it's bottom with 'BRANCH'. I tried to illustrate that with my image here and the pink overlay.

<div class="row">
                                <div class="col-md-4">
                                    <h1 class="number">100</h1>
                                </div>
                                <div class="col-md-8">
                                    <h2 class="description">Branch</h2>
                                </div>
                            </div>

How would I achieve this with CSS?

possible duplicate of [How to align content of a div to the bottom with css?](http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css) — Tech Savant, Mar 13 '15 at 06:16

score 1 · Answer 1 · edited Mar 13 '15 at 09:42

1

{vertical-align:baseline}

UPDATE

since you are using 2 divs, you can just do this...

div.col-md-4, div.col-md-8 {
display: inline-block;
vertical-align:bottom;
}

edited Mar 13 '15 at 09:42

Ankit Gaur

48
4

answered Mar 13 '15 at 06:15

Maki

535
1
8
24

Aligning text "on-the-line" e.g. top, bottom middle

1 Answers1