如何使用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. 刪除不必要的生理餘量

這一切。希望我清楚。