CODEWITHSUNDEEP
htmlcss
Bodokh
Bodokh

Reputation: 1066

How to get text in css to appear in the vertical middle

I have like this little box with text inside, but it is stuck in the top, I have tried using Vertical Align it did not help, here is the code:

.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:40px;
width: 40px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: inline; 
vertical-align:middle;
}

jsfiddle link: http://jsfiddle.net/2Hq3s/

I need the text to be in the absolute middle without enlarging the text.

Upvotes: 0

Views: 46

Answers (4)

Maksim Gladkov
Maksim Gladkov

Reputation: 3079

Use display: table, table-cell, like here: http://jsfiddle.net/maximgladkov/MALAj/

HTML

<p class="Letters">
    <span>aasdfasd<br/>asdfasdfasdf</span>
</p>

CSS

.Letters
{
    font-size:24px;
    color: white;
    font-family:Futura, Arial, San-serif;
    height:400px;
    width: 400px;
    margin:2px;
    position:relative;
    top:5px;
    background-color:#3594F0;
    text-align: center;
    float: left;
    display: table;
}

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

Upvotes: 1

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Use display:table-cell on parent to use vertical align property Here is a fiddle

<div class="parent">
    <p class="Letters">a</p>
</div>

.parent{
    background-color:#3594F0;
    display:table-cell;
}

Upvotes: 0

RobinvdA
RobinvdA

Reputation: 1363

Use absolute positioning

top:50%;
bottom:50%;
position:absolute;

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

Upvotes: 0

kei
kei

Reputation: 20511

Add to .Letters

line-height:40px;       /* Same value as your 'height' */
vertical-align:middle;

DEMO

Upvotes: 3

Related Questions