Margin 0 auto 到 div 内的跨度不起作用

Posted 2023-03-06

【中文标题】Margin 0 auto 到 div 内的跨度不起作用

【英文标题】：Margin 0 auto to a span within div not working

【发布时间】：2014-12-24 02:08:03

【问题描述】：

我会在一个 div 中调用一个跨度，它会占用边距，但 margin:0 auto 不起作用。有什么建议吗？

html

<div>
    <span>
         <h3>Paris Eurostar Breaks</h3>
         <p>Curabitur fringilla mauris interdum nec magna</p>
    </span>
</div>

css

div
    width:465px;
    min-height:201px;

div span
    display:inline-block;
    color:#FFF;
    border-bottom:1px #FFF solid;
    border-top:1px #FFF solid;
    margin:0 auto;  

需要输出

【问题讨论】：

中心 html 标签能满足你的需要吗？

我很困惑为什么你会在你的情况下使用 span 而不是 div。除了选择部分内联元素之外，我从未使用过跨度。

请注意，您的 html 无效：span 元素的内容模型是 phrasing content，但 p 和 h3 只能在需要 flow content 的地方使用。

【参考方案1】：

您必须将display 更改为block，然后为您的跨度添加宽度。 Fiddle

【参考方案2】：

margin: 0 auto 将水平居中块级元素，而不是内联块元素：

10.3.3 Block-level, non-replaced elements in normal flow

如果'margin-left'和'margin-right'都是'auto'，它们使用的值 是平等的。这使元素相对于 包含块的边缘。

10.3.9 'Inline-block', non-replaced elements in normal flow

“margin-left”或“margin-right”的“auto”计算值变为 使用值“0”。

要将inline-block 居中，您可以将text-align: center 添加到其容器中。

div
  width:465px;
  min-height:201px;
  text-align: center;

div span
  display:inline-block;
  border-bottom:1px solid;
  border-top:1px solid;
  margin:0 auto;  

<div>
    <span>
         <h3>Paris Eurostar Breaks</h3>
         <p>Curabitur fringilla mauris interdum nec magna</p>
    </span>
</div>

【参考方案3】：

要将horizontal 与margin 居中，元素必须有一个固定的width。

既然你使用inline-block试试这个：

div 
  text-align:Center;