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

默认vertical-align为baseline。这意味着没有文字（.ytp-play-button）的按钮的下边缘与文字的底部对齐（不包括＆＃34;下行＆＃34;，类似＆＃34; g＆＃34;或＆＃34; p＆＃34;）在另外两个按钮中。

尝试：

button {
  vertical-align: bottom;
}

看到差异。

来源：实验和documentation。

请注意，您可以使用不含表格和表格单元格的vertical-align规则。

Answer 2

您可以使用flexbox实现它：

＆＃13;

#footer{
    display: flex;
    align-items: center;
}

button.ytp-play-button {
    width: 50px;
    height: 50px;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: