Best and easiest way to center vertically and horizontally text within a div.

paddyhaig · July 7, 2010

I have a number of divs that I wish to use as buttons on an interface and I would like to center the text in each one of them.

Here is the code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

#bodyDiv {
position:relative;
width:550px;
height:325px;
z-index:1;
left: 50%;
top: 10px;
margin-left: -275px;
background-color: #CCC;
border: 1px solid #000;
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-weight: bold;
color: #F00;
}

/*This is the table*/
table
{
border-collapse:collapse;
}
table, td
{
border: 1px solid black;
}

td
{
height:30px;
vertical-align:middle;
}

td
{
text-align:center;
font-weight: bold;
color: #FFF;
}

/*This is the end of the table*/

/*This is the beggining of the left column*/
#apDiv1 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 25px;
top: 25px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv2 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 25px;
top: 100px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv3 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 25px;
top: 175px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv4 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 25px;
top: 250px;
background-color: #D6D6D6;
border: 1px solid #000;
}
/*This is the end of the left column*/

/*This is the beggining of the middle column*/
#apDiv5 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 200px;
top: 25px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv6 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 200px;
top: 100px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv7 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 200px;
top: 175px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv8 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 200px;
top: 250px;
background-color: #D6D6D6;
border: 1px solid #000;
}
/*This is the end of the middle column*/

/*This is the beggining of the right column*/
#apDiv9 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 375px;
top: 25px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv10 {
position:absolute;
width:150px;
height:50px;
z-index:2;
top: 100px;
left: 375px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv11 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 375px;
top: 175px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv12 {
position:absolute;
width:150px;
height:50px;
z-index:2;
left: 375px;
top: 250px;
background-color: #D6D6D6;
border: 1px solid #000;
}

/*This is the end of the right column*/

-->
</style>
</head>

<body>
<div id="bodyDiv">
  <div id="apDiv1">Test1</br></div>
  <div id="apDiv2">Test2</div>
  <div id="apDiv3">Test3</div>
  <div id="apDiv4">Test4</div>
  <!-This is the end of the left row-->
  <!-This is the begging of the middle row-->
  <div id="apDiv5">Test5</div>
  <div id="apDiv6">Test6</div>
  <div id="apDiv7">Test7</div>
  <div id="apDiv8">Test8</div>
  <!-This is the end of the middle row-->
  <!-This is the begging of the right row-->
  <div id="apDiv9">Test9</div>
  <div id="apDiv10">Test10</div>
  <div id="apDiv11">Test11</div>
  <div id="apDiv12">Test12</div>
  <!-This is the end of the right row-->
</div>
</body>
</html>

isedeasy · July 9, 2010

div {
width:200px;
height:3em;
padding-top:2em;
text-align:center;
}

if the div has a fixed height then swap ems for pixels. You just have to play around with the height and top padding till its vertically aligned. Remember that overall height of the div = height plus top and bottom padding.

code is untested

ignace · July 9, 2010

<div id="dead-center">dead centered</div>

</div>

#dead-center {

position: absolute;

left: 50%;

width: 300px;

margin-left: -150px;

top: 50%;

height: 200px;

margin-top: -100px;

}

haku · July 10, 2010

Let's imagine you have an element 50px high. If your text is on one line, you can center it horizontally and vertically like this:

#element
{
  text-align:center;
  line-height:50px;
}

You set the line height to the same height as the element, and this centers it vertically.

Now if your content is on two lines, you would cut the line height in half to 25px. And so on.

paddyhaig · July 11, 2010

Superb, got it! I used the Old man solution in the end, I am sure all the solutions are equal valid. Thank you every one. I think at this rate I might even get this application built before I keel over.

#element

{

text-align:center;

line-height:50px;

}

{

The greatest art in life is to bring out the best in someone else.

Sign In

Best and easiest way to center vertically and horizontally text within a div.

Recommended Posts

paddyhaig

Link to comment

Share on other sites

isedeasy

Link to comment

Share on other sites

ignace

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

paddyhaig

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information