Is it possible to horizontally center an inline element without extra markup or styling parent containers?

user1694077 picture user1694077 · Apr 10, 2013 · Viewed 14.9k times · Source

The question is basically already stated in the title, but to clarify: I'm trying to horizontally center an anchor <a> in a main content area.

I would like to do this without:

  • Using fixed widths
  • Adding extra markup (an extra parent div for example)
  • Styling the parent container (so setting the parent to text-align:center for example)
  • Setting the <a> as a full width block (I would like to keep the clickable area a big as the link itself)

So basically I would like to do this just by styling the anchor itself in css, in a dynamic (shrinkwrap) way. I've been trying, but haven't found a way yet, does anyone know how to do this?

Answer

Zoltan Toth picture Zoltan Toth · Apr 10, 2013

Try this - DEMO

a {
    display: table;
    margin: auto;
}