Align Text vertically

Question

I am trying to align a text vertically in a DIV. I tried it with CSS line-height property, but no luck.

This is my HTML -

  <div class="vertical">
     <h4>Content one</h4>
  </div>

  <br><br><br><br>

  <div class="vertical">
     <h4>This is Content Tow</h4>
  </div

My CSS -

.vertical {
    background: #8C3A0A;
    border-radius: 6px;
    color: #FFFFFF;
    float: left;
    height: 48px;
    line-height: 50px;
    margin-right: 10px;
    padding: 5px;
    text-align: center;
    width: 25%;
}

Any body can tell me how I set these text to vertically center?

Thank You.

knitevision · Accepted Answer · 2014-06-06T15:19:01.607

1

You can try using vertical-align.

The key is that it is applied only to elements with display set to inline, inline-block or table-cell. Moreover, the display property of the parent of these elements also has to be set to one of these 3 values.

And it does vertically align not the element itself, but it's contents relative to the parent.

**Example**, try playing with the vertical-align of the span element.

And also try changing the display property of the div and span elements.

I suggest reading w3c specifications or the Mozilla Developer Network article for more information

edited Jun 06 '14 at 15:19

answered Jun 06 '14 at 15:13

knitevision

3,023
6
29
44

How about browser compatibility of this example? – TNK Jun 06 '14 at 15:27
It is provided @ the MDN site. IE4+, Chrome 1+, Firefox 1.7+, Safari 1+, Opera 4+ – knitevision Jun 06 '14 at 15:30

score 0 · Answer 2 · answered Jun 06 '14 at 15:01

0

Change your css to this:

.vertical {
    background: #8C3A0A;
    border-radius: 6px;
    color: #FFFFFF;
    float: left;
    margin-right: 10px;
    text-align: center;
    width: 25%;
}

h2 default style.

h2{ font-size: 1.5em; margin: .75em 0 }

Default style sheet

There is no need to use line height :)

fiddle

answered Jun 06 '14 at 15:01

Alex Char

32,879
9
49
70

Thanks for your answer, But here I need to use height for my DIV. NOTE: I am using bootstrap – TNK Jun 06 '14 at 15:14
Updated fiddle tell me if is what you want http://jsfiddle.net/5aYJU/2/ – Alex Char Jun 06 '14 at 15:24
Yes Alek, I can't use padding here – TNK Jun 06 '14 at 15:28
Last try for me http://jsfiddle.net/5aYJU/3/ – Alex Char Jun 06 '14 at 15:42

score 0 · Answer 3 · answered Jun 06 '14 at 15:04

0

The H4 element is not align as you want. Add a margin: auto and it will solve your problem.

h4{
    margin: auto;
}

Fiddle

answered Jun 06 '14 at 15:04

Itay Gal

10,706
6
36
75

When DIV responsive, second line of the text is disappearing – TNK Jun 06 '14 at 15:05

Align Text vertically

3 Answers3