解释按钮和 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">
 <button class="ytp-play-button ytp-button" aria-live="assertive" tabindex="32" aria-label="Pause">
   <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">
    <defs>
      <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">
       <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>
      </path>
    </defs>
    <use xlink:href="#ytp-12" class="ytp-svg-shadow"></use>
    <use xlink:href="#ytp-12" class="ytp-svg-fill"></use>
   </svg>
 </button>

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

Answer 1

你可以使用flexbox来实现:

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

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

<div id="footer">
 <button class="ytp-play-button ytp-button" aria-live="assertive" tabindex="32" aria-label="Pause">
   <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">
    <defs>
      <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">
       <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>
      </path>
    </defs>
    <use xlink:href="#ytp-12" class="ytp-svg-shadow"></use>
    <use xlink:href="#ytp-12" class="ytp-svg-fill"></use>
   </svg>
 </button>

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

Answer 2

默认 vertical-align 为 baseline。这意味着没有文本的按钮底部边缘 (.ytp-play-button) 与文本的底部对齐（不包括 "descenders"，如 "g" 或 "p") 在其他两个按钮中。

尝试：

button {
  vertical-align: bottom;
}

看看区别。

来源：实验和 documentation。

请注意，您可以在没有 table 和 table 单元格的情况下使用 vertical-align 规则。

解释按钮和 svg 的这种垂直对齐方式

Explain this vertical alignment of buttons and svg

css

vertical-alignment