I'm trying to finish the last tweaks on a site I created using an Elegant Themes Wordpress theme and I'm having a frustrating time figuring out how to center the page titles so they are each exactly centered regardless of their width. Here's an image of how I want it to look and how it currently looks, for both short and long titles.
Title_positioning
Obviously the width of the title on each page is slightly different which is why I'm having trouble since using margin-left to center the title will need a different margin for eac title and I need something that will be relative and not need to be specified for each title seperately.

Here's the code for the title area of a Short Title:

<div id="category-name">
    <div class="title-area">
        <div class="left-dash">&nbsp; </div>
        <h1 class="category-title">Volunteers</h1>
        <div class="right-dash">&nbsp; </div>
    </div>
</div>

Here's the code for the title area of a Short Title:

   <div id="category-name">
        <div class="title-area"><div class="left-dash">&nbsp; </div><h1 class="category-title">FC Evaluation 2011-2012</h1><div class="right-dash">&nbsp; </div></div>

    </div>

Here is the css:

#category-name {
    padding: 0 0 0 16px;
    text-align: center;
}

.title-area {
    margin-left: 362px;
    width: 491px;
}

.left-dash, .right-dash {
    background: url("images/dashed_line.png") repeat-x scroll 50% 50% transparent;
    float: left;
    margin-top: 147px;
    width: 43px;
}

#page-top h1.category-title {
    color: #520E7D;
    float: left;
    font-family: 'MaidenOrangeRegular',sans-serif;
    font-size: 31px;
    font-style: normal;
    letter-spacing: 1px;
    line-height: 80px;
    margin-top: 117px;
    padding: 0 10px;
    text-shadow: 0 0 1px #7AABA5;
    text-transform: uppercase;
}

I know I need to remove the margin-left but I'm not sure what to replace it with to get it to work.

Please help!

Thanks in advance :-)

I thin your problem is with the dashes(right and left) aligned with float. I don't like to use float, instead I use this class to align inline:

.inline
{
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    vertical-align: top;

    *display: inline;
}

Try it and let me know.

margin-left:auto; margin-right:auto;

margin:auto 0; // fill left and right zero top and bottom

Thanks AleMonteiro and almostbob,

Based on both of your code I got it lined up properly and I learned something new!

Thanks so much fo your help!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.