tags:

views:

16

answers:

1

With markup like this:

<div id='titlebar'>
  <a><img src='foo.png'></a>
  <span>Title</span>
</div>

is it possible to center "Title" while positioning the anchored image?

   ... [foo] .....................Title ...............................

Thanks

A: 
#titlebar {
  text-align: center;
}

#titlebar a {
  position: relative;
  left: -40em;
}

Try that.

The title text will be slightly off center due to the original positioning of the image in the anchor, so you can apply a relative position to that as well.

Jamie Wong
@Jamie, thanks for the suggestion to use negative positioning. I am using a negative percentage for the anchor's left position rather than a negative em unit. That works best to keep the image an appropriate distance from the centered title and to keep the image on the page when it is resized. Regards, Tim.
Tim