CODEWITHSUNDEEP
jqueryhtmlcsscentervertical-alignment
Aloehart
Aloehart

Reputation: 337

Vertical center text in CSS within a div

I've found some threads here on the issue but all were pre-CSS3.

Is there currently a way to center text vertically within a div? I'm making a simple webpage with 4 divs (code at the bottom of post).

Essentially the plan is to turn the plain divs into large buttons using jquery and have the page behave differently when they are clicked. But visually it looks poor right now because the text isn't centering vertically. With CSS3 and HTML is there currently a reliable way to resolve this?

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jscript.js"></script>
<title>Title</title>
</head>

<body>

<div id="containerDiv">
<div id="topLeft">Some text</div>
<div id="topRight">some more text</div><br />
<div id="bottomLeft">south west text</div>
<div id="bottomRight">south east text</div>

</div>
</body>
</html>

CSS follows

#containerDiv {
    background-color:#EEEEEE; 
    width:80%; 
    margin-left:auto; 
    margin-right:auto;
    }

#topLeft {
    float:left; 
    width:50%; 
    background-color:#8800AA; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center; 
    height:100px; 
    vertical-align:middle;
    }

#topRight {
    float:right; 
    width:50%; 
    background-color:#aa0088; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    vertical-align:middle;
    }

#bottomLeft {
    float:left; 
    width:50%; 
    background-color:#00aa88; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    vertical-align:middle;
    }

#bottomRight {
    float:right; 
    width:50%; 
    background-color:#0088aa; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    vertical-align:middle;
    }

Upvotes: 0

Views: 1649

Answers (4)

Amit
Amit

Reputation: 15387

Try this

#containerDiv {
    background-color:#EEEEEE; 
    width:80%; 
    margin-left:auto; 
    margin-right:auto;
    }

#topLeft {
    float:left; 
    width:50%; 
    background-color:#8800AA; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center; 
    height:100px; 
    line-height:100px;
    }

#topRight {
    float:right; 
    width:50%; 
    background-color:#aa0088; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    line-height:100px;
    }

#bottomLeft {
    float:left; 
    width:50%; 
    background-color:#00aa88; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    line-height:100px;
    }

#bottomRight {
    float:right; 
    width:50%; 
    background-color:#0088aa; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    line-height:100px;
    }

Demo

Upvotes: 0

Joris Lindhout
Joris Lindhout

Reputation: 205

If you want to use vertical-align: middle; than you should also use display: table-cell and display: table. Another way to do this is to set line-height to 100px - this only works if you have only 1 line of text though (since these should be buttons that kinda makes sense).

Upvotes: 0

Noel Widmer
Noel Widmer

Reputation: 4572

There is acctually not really great way to that, but... - You can set the line-height property of your div to its height. - Or you display your div as a table cell and can then use the vertical-align property by setting it to middle

Upvotes: 0

Tim Dorr
Tim Dorr

Reputation: 4921

As a trick, you can use line-height to center text vertically if you know the height of the div. Just set it to the same height as the div and it will center vertically:

.some-div {
    height: 100px;
    line-height: 100px;
}

Upvotes: 1

Related Questions