CSS 如何将 div 内的 span 元素水平居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16489937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I horizontally center a span element inside a div
提问by J82
I am trying to center the two links 'view website' and 'view project' inside the surrounding div. Can someone point out what I need to do to make this work?
我试图将两个链接“查看网站”和“查看项目”放在周围的 div 中。有人可以指出我需要做什么才能使这项工作有效吗？
JS Fiddle: http://jsfiddle.net/F6R9C/
JS小提琴：http: //jsfiddle.net/F6R9C/
HTML
HTML
<div>
<span>
<a href="#" target="_blank">Visit website</a>
<a href="#">View project</a>
</span>
</div>
CSS
CSS
div { background:red;overflow:hidden }
span a {
background:#222;
color:#fff;
display:block;
float:left;
margin:10px 10px 0 0;
padding:5px 10px
}
回答by user1721135
another option would be to give the span display:table;and center it via margin:0 auto;
另一种选择是display:table;通过margin:0 auto;
span {
display:table;
margin:0 auto;
}
回答by adrift
One option is to give the <a>a display of inline-blockand then apply text-align: center;on the containing block (remove the float as well):
一种选择是<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
}
回答by Ahmed Bahtity
<div style="text-align:center">
<span>Short text</span><br />
<span>This is long text</span>
</div>
回答by Talha Imam
Applying inline-blockto the element that is to be centered and applying text-align:centerto the parent block did the trick for me.
应用于inline-block要居中的元素并应用于text-align:center父块对我来说很有用。
Works even on <span>tags.
甚至适用于<span>标签。
回答by David Ziemann
Spans can get a bit tricky to deal with. if you set the width of teach span you can use
跨度处理起来可能有点棘手。如果您设置教学跨度的宽度，您可以使用
margin: 0 auto;
to center them, but they then end up on different lines. I would suggest trying a different approach to your structure.
将它们居中，但它们最终会出现在不同的线上。我建议对您的结构尝试不同的方法。
Here is the jsfiddle I cam e up with off the top of my head: jsFiddle
这是我从头顶上想出的 jsfiddle：jsFiddle
EDIT:
编辑：
Adrift's answer is the easiest solution :)
漂流的答案是最简单的解决方案:)
回答by Duffmaster33
I assume you want to center them on one line and not on two separate lines based on your fiddle. If that is the case, try the following css:
我假设您想将它们放在一条线上，而不是根据您的小提琴放在两条单独的线上。如果是这种情况，请尝试以下 css：
div { background:red;
overflow:hidden;
}
span { display:block;
margin:0 auto;
width:200px;
}
span a { padding:5px 10px;
color:#fff;
background:#222;
}
I removed the float since you want to center it, and then made the span surrounding the links centered by adding margin:0 auto to them. Finally, I added a static width to the span. This centers the links on one line within the red div.
我删除了浮动，因为您想将它居中，然后通过向它们添加 margin:0 auto 使链接周围的跨度居中。最后，我为跨度添加了一个静态宽度。这将链接集中在红色 div 中的一行上。
