將CSS圖標與文字對齊

我在CSS中創建了一個關閉按鈕，我正在努力與常規文字對齊。其包含的跨度元素似乎與相鄰的文本對齊，但不包含子div。將CSS圖標與文字對齊

<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

來源

2017-01-15 Mario Parra

刪除display: block與vertical-align: middle對準被.close-button類的關閉按鈕。 Here is a demonstration。

設置display: block將導致關閉圖標換行。 inline-block表現爲內嵌元素，但允許您設置寬度和高度。

修復後，圖標位於同一行，但未對齊。 vertical-align: middle將按鈕與文本居中對齊（垂直）。

來源

2017-01-15 20:56:33 Bojangles

我不確定你在演示什麼。 '.close-button'類現在有兩個'inline-block'（已經添加了），在你的Pen中，按鈕更大。我添加了'vertical-align：middle'，但是當按鈕位於1x1em時，它仍然沒有對齊。謝謝 –

你說得對，我錯過了第二個'inline-block'。答案已更新。當你說按鈕不對齊1em時，你能證明你的意思嗎？我不知道我明白你的意思 – Bojangles

我犯了一個錯誤，在'.close-button'上留下了兩組''display'和'width' /'height'屬性。這個筆是準確的：http://codepen.io/ourcore/pen/vgXxQG。 –

當垂直調整文本，行高爲您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; 
    } 
}

錨的行高設置爲你關閉框的高度將文本居中，垂直，在那個空間。

來源

2017-01-15 21:23:52 allnodcoms

將CSS圖標與文字對齊

回答

相關問題