CSS - 爲分頁器內聯元素保證金的問題

Question

我想達到以下分頁器：

但是，我結束了這一點：

顯然，黃色只是告訴我頂部和底部的位置（應該是白色的），而我似乎正在獲取這種不需要的頂部和底部邊距。我已經嘗試了幾種方法，包括display:inline-block,display:inline,margin-top:-2px，但是失去了我嘗試過的以及我沒有的東西。 span最初是div，但這是我改變嘗試的許多事情之一。

這是我最後一次嘗試：

<style> 
.pageDivider { 
    margin: 30px 0; 
    background: #E5E5E5; 
    padding: 0; 
    text-align: center; 
} 
.pageDivider .inner { 
    line-height: 24px; 
    margin: 0 auto; 
    padding: 0 15px; 
    background: yellow; 
    font-size: 16px; 
    color: #333; 
} 
</style> 

<div class="pageDivider"><span class="inner">SHARE</span></div> 

如何做這有道任何線索？

Answer 1

我不能刪除我的問題，所以我會分享我剛剛找到的解決方案，它真的很好用 - 我希望它可以幫助其他人。

JSFIDDLE DEMO

h6.pageDivider { 
    font-family: 'Lato', 'Open Sans', sans-serif; 
    overflow: hidden; 
    text-align: center; 
    margin: 40px 0; 
    font-weight: 700; 
    color: #555; 
} 
h6.pageDivider:before, 
h6.pageDivider:after { 
    background-color: #E9E9E9; 
    content: ""; 
    display: inline-block; 
    height: 18px; 
    position: relative; 
    vertical-align: middle; 
    width: 50%; 
} 
h6.pageDivider:before { 
    right: 30px; 
    margin-left: -50%; 
} 
h6.pageDivider:after { 
    left: 30px; 
    margin-right: -50%; 
} 

<h6 class="pageDivider">HELLO WORLD</h6> 

Answer 2

你的答案是....

.pageDivider { 
 
    margin: 30px 0; 
 
    background: #E5E5E5; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
.pageDivider .inner { 
 
    line-height: 24px; 
 
    margin: 0 auto; 
 
    padding:2.5px 20px !important; 
 
    background: yellow; 
 
    font-size: 16px; 
 
    color: #333; 
 
}

<div class="pageDivider"><span class="inner">SHARE</span></div>