如何在 div 内水平居中 span 元素答案

【问题标题】：How do I horizontally center a span element inside a div如何在 div 内水平居中 span 元素
【发布时间】：2013-05-10 19:58:42
【问题描述】：

我正在尝试将两个链接“查看网站”和“查看项目”集中在周围的 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
}

【问题讨论】：

相关：stackoverflow.com/questions/7886460/…
这里有两种简单的方法可以使 div 中的元素居中，垂直居中，水平居中或两者兼而有之（纯 CSS）：stackoverflow.com/a/31977476/3597276

标签： css

【解决方案1】：

另一种选择是提供跨度display: table; 并通过margin: 0 auto; 将其居中

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

【讨论】：

看到同一问题的不同解决方案总是很有趣。
仅支持最近几年更新的浏览器。 caniuse.com/#feat=css-table
最佳解决方案 IMO
为什么我们需要 display: table;?

【解决方案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/

【讨论】：

这对我来说是一个中等复杂的主题，我需要破解一下。进一步链接到 JSFiddle 非常棒，可以让我进行测试。我编辑了这个条目以包括将“overflow:hidden”更改为“overflow:hidden;”
看起来是一个非常干净的解决方案。
请参阅下面的 Ahmed Bahtity 答案，style="text-align:center"，它更简洁。

【解决方案3】：

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

【讨论】：

【解决方案4】：

将inline-block 应用于要居中的元素并将text-align:center 应用于父块对我来说是诀窍。

甚至可以在 <span> 标签上使用。

【讨论】：

【解决方案5】：

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

margin: 0 auto;

使它们居中，但它们最终会出现在不同的行上。我建议对您的结构尝试不同的方法。

这是我想到的 jsfiddle：jsFiddle

编辑：

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

【讨论】：

【解决方案6】：

我假设您希望根据您的小提琴将它们集中在一行而不是两条单独的行上。如果是这种情况，请尝试以下 css：

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

我删除了浮动，因为您想将其居中，然后通过向它们添加 margin:0 auto 使围绕链接的跨度居中。最后，我为跨度添加了一个静态宽度。这会将链接集中在红色 div 内的一行中。

【讨论】：

【解决方案7】：

只有 css div 才能使内容居中

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

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

【讨论】：