CSSアイコンとテキストの整列

Question

CSSで閉じるボタンを作成しましたが、通常のテキストと整列するのには苦労しています。その包含スパン要素は、隣接するテキストと整列するように見えますが、子divは整列していません。

<a class="event-filter button" href="#">Filter name 
    <span class="close-button"> 
    <div class="menu-bar menu-bar-top"></div> 
    <div class="menu-bar menu-bar-bottom"></div> 
    </span> 
</a> 

.close-button { 
    display: inline-block; 
    position: relative; 
    width: 1em; 
    height: 1em; 
    z-index: 15; 
    top: 0; 
    left: 0; 
    padding: 0; 
} 
.close-button:hover { 
    cursor: pointer; 
} 
.close-button .menu-bar { 
    position: absolute; 
    border-radius: 2px; 
    width: 100%; 
    border: 1px solid grey; 
} 
.close-button .menu-bar-top { 
    border-bottom: none; 
    top: 0; 
    transform: rotate(45deg) translate(8px, 8px); 
} 
.close-button .menu-bar-bottom { 
    border-top: none; 
    top: 22px; 
    transform: rotate(-45deg) translate(7px, -7px); 
} 

http://codepen.io/ourcore/pen/vgXxQG

Answer 1

display: blockを取り外し、.close-buttonクラスのvertical-align: middleと閉じるボタンの位置を合わせます。 Here is a demonstration。

設定をdisplay: blockにすると、閉じるアイコンが折り返されます。 inline-blockはインライン要素として動作しますが、幅と高さを設定することができます。

これを修正すると、アイコンは同じ行にありますが、整列していません。 vertical-align: middleボタンをテキストと中央揃え（垂直方向）します。

Answer 2

垂直テキストを正当化すると、行の高さは、あなたのfreindである：あなたの近くのボックスの高さにアンカーの行の高さは、その空間に、縦方向に、テキストを中心に説明する設定

a { 
    padding: 10px; 
    background-color: #f3f3f3; 
    color: grey; 
    line-height: 1em; 
    text-decoration: none; 
} 

.close-button { 
    display: inline-block; 
    position: relative; 
    width: 1em; 
    height: 1em; 
    z-index: 15; 
    top: -2px; /* tweeked your placement a little */ 
    left: 0; 
    padding: 0; 

    &:hover { 
     cursor: pointer; 
    } 
} 

。