解釋按鈕的這種垂直對齊和SVG

我終於用table和table-cell修復它，但你能解釋一下這個垂直對齊是什麼？這沒有任何意義。它既不是頂端對齊，也不是中間和底部，它驅使我堅果。如果你刪除了svg並放置文本，它就可以正常工作。

什麼是默認對齊？

#footer{ 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    /*display:table;*/ 
 
} 
 

 
button.ytp-play-button { 
 
    padding: 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: none; 
 
} 
 

 
button{ 
 
    display:inline-block; 
 
    /*display:table-cell;*/ 
 
    /*vertical-align:middle;*/ 
 
}

<div id="footer"> 
 
\t <button class="ytp-play-button ytp-button" aria-live="assertive" tabindex="32" aria-label="Pause"> 
 
\t \t <svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t \t \t \t <defs> 
 
\t \t \t \t \t <path id="ytp-12" d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26"> 
 
\t \t \t \t \t \t \t <animate id="animation" begin="indefinite" attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" to="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" dur="0.1s" keySplines=".4 0 1 1" repeatCount="1"></animate> 
 
\t \t \t \t \t </path> 
 
\t \t \t \t </defs> 
 
\t \t \t \t <use xlink:href="#ytp-12" class="ytp-svg-shadow"></use> 
 
\t \t \t \t <use xlink:href="#ytp-12" class="ytp-svg-fill"></use> 
 
\t \t </svg> 
 
\t </button> 
 

 
\t <button>sign up</button> 
 
\t <button>feedback</button> 
 
</div>

來源

2016-07-22 Miro

默認vertical-align爲baseline。這意味着沒有文字的按鈕的下邊緣（.ytp-play-button）與其他兩個按鈕中的文字（不包括「下邊緣」，如「g」或「p」）的底部對齊。

嘗試：

button { 
    vertical-align: bottom; 
}

看出區別。

來源：實驗和documentation。

請注意，您可以使用不帶表格和表格單元的vertical-align規則。

來源

2016-07-22 07:52:39

Omg。非常感謝。 – Miro

-1

您可以通過使用Flexbox的實現它：

#footer{ 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
button.ytp-play-button { 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="footer"> 
 
\t <button class="ytp-play-button ytp-button" aria-live="assertive" tabindex="32" aria-label="Pause"> 
 
\t \t <svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t \t \t \t <defs> 
 
\t \t \t \t \t <path id="ytp-12" d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26"> 
 
\t \t \t \t \t \t \t <animate id="animation" begin="indefinite" attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" to="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" dur="0.1s" keySplines=".4 0 1 1" repeatCount="1"></animate> 
 
\t \t \t \t \t </path> 
 
\t \t \t \t </defs> 
 
\t \t \t \t <use xlink:href="#ytp-12" class="ytp-svg-shadow"></use> 
 
\t \t \t \t <use xlink:href="#ytp-12" class="ytp-svg-fill"></use> 
 
\t \t </svg> 
 
\t </button> 
 

 
\t <button>sign up</button> 
 
\t <button>feedback</button> 
 
</div>

來源

2016-07-22 07:44:34

OP已經找到了解決方案來實現他們想要的對齊方式。他們要求首先解釋（視覺）錯位。 –

解釋按鈕的這種垂直對齊和SVG

回答

相關問題