Question

I am having an issue with text not being aligned in the center of a DIV.

I have tried:

text-align:center;

and

width:225px; /*width of div*/ 
margin:0px auto;

and it will not center.

Here is the HTML and CSS for the DIV.

HTML

<div id="past">
<h3><a href="/artistphotos/">View Past Messages</a></h3>
</div>

CSS

#past{
    position:absolute;
    left:0;
    top:363px;
    width:225px;
    height:50px;
    background-image:url('../images/members/roundedbox.png');
    z-index:10;
}

I have applied the text-align and margin using inline styles while I was building the page. I have applied it to the div, h3, and a elements and it won’t work in any of them.

What am I missing here? Thanks!

Here is the HTML Code: (excluding the header and footer elements)

<div class="center over_all_under">
</div>
<!--[if !IE]>start intro<![endif]-->
<div class="center">
</div>
<!--[if !IE]>end intro<![endif]-->
<!--[if !IE]>strat main<![endif]-->
<div class="wrap_fullwidth" id="main">
<div class="center">
<br />
<div id="homepage">
    <div id="homepage-main">
        <div id="homepage-main-item" class="full_shadow>{module_adrotator,5622}
        <div id="past">
          <h3><a href="/artistphotos/">View Past Messages</a></h3>
        </div>

This is followed by a lot of code. I could paste it here but because it is hard to read I only included the code above the div.

Answer 1

text-align:center; works fine for me: http://jsfiddle.net/mrchief/bhtZe/

#past {
    position:relative;
    left:0;
    top:363px;
    width:225px;
    height:50px;
    background-image:url('../images/members/roundedbox.png');
    z-index:10;
    text-align:center;    
}

Update: After looking at the page, remove position: absolute from #past h3 as that is preventing the href from center aligning (it gets absolutely positioned).

Also, your div width is small, if you intent to center it on parent background, set #past width to 100%.