Centering heading with CSS sliding doors

Question

I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.

Can you help me understanding how to do it?

Here is the CSS I used for the heading:

h3.offer-title, h3#comments, h3#reply-title  {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }

h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}

Thank you.

Answer 1

It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.

Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.

But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.

So:

1. Add this block:

   h3.offer-title {
       display: inline-block; /* this makes the bg fit the text */
       float: none; /* this overrides float:left */
   }
   

2. Wrap the offer-title element in another div.

3. Style the wrapper with

    .offer-title-wrapper {
       text-align: center;
   }