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

问题

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?

回答1:

Try this - DEMO

a {
    display: table;
    margin: auto;
}

回答2:

You could try this:

body{
    text-align:center;
}
a{
    border:1px solid;
    display:inline;
}

回答3:

Try this

a{
display:block;
text-align:center;
}

来源：https://stackoverflow.com/questions/15931270/is-it-possible-to-horizontally-center-an-inline-element-without-extra-markup-or