How to vertical align in a div?

Question

I don't know how to align the text that is currently in the top left of the header so that it appears in the bottom. Any advise would be greatly appreciated:

This is how is appears at the moment:

enter image description here

This is how I want it to look:

enter image description here

This is code I have so far:

        <div id="header_container">
           <div id="subheader-left" style="float:left; width:50%; text-align:left">chilun liu</div>
              <div id="subheader-right" style="float:right; width:50%; text-align:right">
    <!-- the Social Network's images  -->  
              </div>         
           </div>
        </div>

http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — Reger, Feb 02 '14 at 14:00
you can also make subheader-left and subheader-right absolute positioned with bottom: 0 and header_container relative. — KrishnaDhungana, Feb 02 '14 at 14:02
@user1283674 please do remember to 'select' the answer which helped you, by clicking the tick mark. — Mohd Abdul Mujib, Feb 02 '14 at 14:11

NoobEditor · Answer 1 · 2014-02-02T14:04:01.470

3

Add this to your existing css

#subheader-left,#subheader-right{
 display:table-cell;
 vertical-align:bottom
}

Side Note : This solution is supported IE8 and above...

Additionally

style="border:none; width="40" height="40"

should be

style="border:none; width:40px; height:40px"
                      /*  ^^ no "=" sign or quotes,instead, 
                         semi colon and values only */

edited Feb 02 '14 at 14:04

answered Feb 02 '14 at 13:57

NoobEditor

15,563
19
81
112

@user1283674 : glad to help fella...respond back if you still get a prob! :) – NoobEditor Feb 02 '14 at 14:06

score 1 · Accepted Answer · answered Feb 02 '14 at 14:04

1

try,

#subheader-left { position: absolute; bottom: 0; left: 0; }

answered Feb 02 '14 at 14:04

Mohd Abdul Mujib

13,071
8
64
88

How to vertical align in a div?

2 Answers2