保证金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正常流程中的块级非替换元素

如果'margin-left'和'margin-right'都是'auto',则它们的使用值相等.这使元件相对于容纳块的边缘水平居中.

10.3.9'内联块',正常流程中未替换的元素

'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>