如何使用CSS

Question

居中水平div和span元素这里的链接JS小提琴：JS Fiddle

我试图让我的边框和图标horizontally页面的中心。背景颜色为#f30。

但eveything似乎只留在左侧。我在这里尝试了几篇文章，但他们似乎并没有工作，也检查了谷歌更多，但似乎没有解决它。

这里是为您检查HTML：

<div id ="heading_layout" class="section-1"> 
<span class="d"><span class="icon"></span></span> 
</div> 

这里是为您检查CSS：

#heading_layout { 
margin-top: 30px; 
    width: 100%; 
    text-align: center; 
    background: #f30; 
} 

.section-1 span.d:before { 
    float: left; 
    content: ''; 
    width: 10%; 
    height: 1px; 
    border-bottom: 2px dashed #8000ae; 
} 

.section-1 span.d:after { 
    position: relative; 
    right: 0px; 
    float: left; 
    top: 100%; 
    content: ''; 
    width: 10%; 
    height: 1px; 
    border-bottom: 2px dashed #8000ae; 
} 

span.icon { 
    position: relative; 
    margin-left: 15px; 
    margin-right: 15px; 
    margin-top: -14px; 
    height: 30px; 
    width: 30px; 
    border-radius: 50%; 
    float: left; 
    background: 
    #8000ae url('') 
    3px 3px no-repeat; 
} 

这里的链接JS小提琴：JS Fiddle

感谢。

Answer 1

我重新编辑你的CSS：

#heading_layout { 
    margin-top: 30px; 
    width: 100%; 
    text-align: center; 
    background: #f30; 
} 

.section-1 span.d:before { 
    display: inline-block; 
    content: ''; 
    width: 10%; 
    height: 1px; 
    border-bottom: 2px dashed #8000ae; 
    margin-bottom: 12px; 
} 

.section-1 span.d:after { 
    position: relative; 
    right: 0px; 
    display: inline-block; 
    top: 100%; 
    content: ''; 
    width: 10%; 
    height: 1px; 
    border-bottom: 2px dashed #8000ae; 
    margin-bottom: 12px; 
} 

span.icon { 
    position: relative; 
    margin-left: 15px; 
    margin-right: 15px; 
    height: 30px; 
    width: 30px; 
    border-radius: 50%; 
    display: inline-block; 
    background: 
    #8000ae url('') 
    3px 3px no-repeat; 
    margin-top: 5px; 
} 

我做了什么：

1. 取代了 '浮动：左' 与 '显示：inline-block的' - 现在的text-align是实际上影响他们。
2. 删除不必要的生理余量

这一切。希望我清楚。