Vertical Centering the Text

Question

I am unable to set my text as vertical-center. My text is placed in position:absolute div.

<div class="mydiv">Frameworks and Extensions</div>

and the CSS:

.mydiv{
    width:100px;
    height:70px;
    border:1px solid red;
    position:absolute;
    text-align:center;
    background-color:#ccc;    
}

See fiddle: http://jsfiddle.net/3Zv5s

Sometimes Text will come two or one line. The text should be in vertical center like in table td.

Thanks for your valuable time and suggestion.

Like this? http://stackoverflow.com/questions/7616969/center-text-vertically-within-div — jcoppo, Nov 20 '13 at 14:13

Ishan Jain · Answer 1 · 2013-11-20T14:27:29.313

2

Try with this CSS:

.mydiv{
    width:100px;
    height:70px;
    border:1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    background-color:#ccc;    
}

Try this

UPDATED

You could set container to position: absolute; and make .mydiv to display:table-cell and vertical-align:middle.

HTML -

<div id="container"><div class="mydiv">Frameworks and Extensions</div></div>

CSS -

#container{
    position: absolute;
}

.mydiv{
    width:100px;
    height:70px;
    border:1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    background-color:#ccc;    
}

Try for this

edited Nov 20 '13 at 14:27

answered Nov 20 '13 at 14:13

Ishan Jain

8,063
9
48
75

1

display:table-cell doesn't work on absolutely positioned elements – Pete Nov 20 '13 at 14:18
Yes, I removed "position" property into CSS. – Ishan Jain Nov 20 '13 at 14:19
you are kind of removing part of the functionality then as it says: "My text is placed in position:absolute div." – Pete Nov 20 '13 at 14:22
Can't we do without adding another div inside or outside? – Pavan Kumar Nov 20 '13 at 14:33
@PavanKumar not if you want the div to be absolutely positioned (as stated in your question), if the div doesn't need that style then you can just get rid of the outside div – Pete Nov 20 '13 at 16:38

score 0 · Answer 2 · answered Nov 20 '13 at 14:13

0

You could put your text into a table and use vertical-align

http://jsfiddle.net/3Zv5s/6/

answered Nov 20 '13 at 14:13

SaturnsEye

6,297
10
46
62

it's just a method different from everyone elses – SaturnsEye Nov 20 '13 at 14:14
On the other hand, all browsers will support it! – Marc Audet Nov 20 '13 at 14:15
@MarcAudet ;) exactly – SaturnsEye Nov 20 '13 at 14:15
seo and accessibility won't though - tables are for tabular data! – Pete Nov 20 '13 at 14:20
Table data shouldn't be a problem for SEO – SaturnsEye Nov 20 '13 at 14:22

score 0 · Answer 3 · answered Nov 20 '13 at 14:13

0

Try this:

HTML:

<div class="mydiv">
    <span class="span">Frameworks and Extensions</span>
</div>

CSS:

.mydiv{display:table-row;}
.span{display:table-cell;vertical-align:middle;height:inherit;}

Fiddle here.

answered Nov 20 '13 at 14:13

codingrose

15,563
11
39
58

score 0 · Answer 4 · answered Nov 20 '13 at 14:13

You could use a combination of display: table and display: table-cell.

Change slightly your markup:

<div class="mydiv">
    <div>Frameworks and Extensions</div>
</div>

And your CSS:

.mydiv{
    width:100px;
    height:70px;
    border:1px solid red;
    display: table;
    background-color:#ccc;  
    overflow: hidden;
}

.mydiv div {
    vertical-align: middle;
    display: table-cell;
}

http://jsfiddle.net/3Zv5s/2/

score 0 · Answer 5 · answered Nov 20 '13 at 14:18

Option #1 : table-cell

Simplest solution, but only for IE7+

<div class="mydiv">
    <span>Frameworks and Extensions</span>
</div>

.mydiv {
    width:100px;
    height:70px;
    border:1px solid red;
    position:absolute;
    text-align:center;
    background-color:#ccc;   

    display: table;
}
.mydiv>span {
    display: table-cell;
    vertical-align: middle; 
}

Fiddle

Option #2 : double span

A bit more tricky, but works under IE7

<div class="mydiv">
    <span><span>Frameworks and Extensions</span></span>
</div>

.mydiv {
    width:100px;
    height:70px;
    border:1px solid red;
    position:absolute;
    text-align:center;
    background-color:#ccc;   

    display: block;
    line-height: 65px; /* 70px applied on 1st span */
}
.mydiv>span {
    display: inline-block;
    vertical-align: middle; /* 2nd span centered */
    line-height: 0;
}
.mydiv>span>span {
    line-height: 20px; /* here's the "true" line-height */
}

Fiddle

Vertical Centering the Text

5 Answers5

Option #1 : table-cell

Option #2 : double span