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

孤人 提交于 2020-06-09 10:05:49

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!