如何在div中水平居中span元素

Question

我试图将两个链接的"查看网站"和"查看项目"集中在周围的div中.有人可以指出我需要做些什么来使这项工作？

JS小提琴:http://jsfiddle.net/F6R9C/

HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

Answer 1

另一个选择是给出跨度display:table;并使其居中margin:0 auto;

span {
display:table;
margin:0 auto;
}

Answer 2

一个选项是给出<a>显示inline-block然后应用于text-align: center;包含块(也移除浮动):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

Answer 3

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

Answer 4

将'inline-block'应用于要居中的元素,并将text-align:center应用于父块,这对我来说非常有用.

甚至可以在inline-block标签上使用