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

我试图中心的两个链接’查看网站’和’查看项目’内的周围 div。有人能告诉我怎么做才能成功吗？

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

超文本标示语言

<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
}
408086 次浏览
小开
最佳答案

一种选择是给 <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/

小开

跨度可能会变得有点棘手处理。如果你设置的宽度教跨度，你可以使用

margin: 0 auto;

把它们集中起来，但是它们最终会在不同的线上结束。我建议你试试不同的方法。

这就是我脑子里突然冒出来的小提琴: JsFiddle

编辑:

漂流的答案是最简单的解决方案:)

小开

我假设你想把它们放在一条线上，而不是根据你的小提琴把它们放在两条独立的线上。如果是这种情况，请尝试以下 css:

 div { background:red;
overflow:hidden;
}
span { display:block;
margin:0 auto;
width:200px;
}
span a { padding:5px 10px;
color:#fff;
background:#222;
}

我删除了浮动，因为你想要它居中，然后通过添加边距: 0自动为他们周围的链接居中的跨度。最后，我为跨度添加了一个静态宽度。这将链接集中在红色 div 中的一行上。

小开

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

span {
display: table;
margin: 0 auto;
}
小开 
<div style="text-align:center">
<span>Short text</span><br />
<span>This is long text</span>
</div>
小开

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

甚至在 <span>标签上也可以工作。

小开

只有 css div 可以中心内容

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

Http://jsfiddle.net/4q2r69te/1/


提交答案