保证金0自动到div内的范围不起作用

Question

我在div中调用一个span，它占用边距但是余量：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;  
}

需要输出

Answer 1

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

由于您使用的是inline-block，请尝试以下操作：

div {
  text-align:Center;
}

Answer 2

margin: 0 auto将水平阻止块级元素，但不是内联块元素：

  

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

     

如果两个边缘都离开了＆＃39;和＆＃39; margin-right＆＃39;是＆＃39; auto＆＃39;，它们的使用价值   是平等的。这使元素相对于中心水平居中   包含块的边缘。

     

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

     

＆＃39; auto＆＃39;的计算值对于＆＃39; margin-left＆＃39;或者＆＃39; margin-right＆＃39;变   使用的值为＆＃39; 0＆＃39;。

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

＆＃13;

＆＃13;

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;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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