Объясняют это вертикальное выравнивание кнопок и SVG

Question

Вот demo

Я наконец использовал 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>

Answer 1

по умолчанию vertical-align является baseline. Это означает, что нижний край кнопки без текста (.ytp-play-button) выстраивается в линию с нижней частью текста (не считая «descenders», например «g» или «p») в двух других кнопках.

Try:

button { 
    vertical-align: bottom; 
} 

, чтобы увидеть разницу.

Источник: эксперимент и documentation.

Обратите внимание, что вы можете использовать правило vertical-align без таблиц и табличных ячеек.

Answer 2

Вы можете достичь его с помощью 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>