html - 当某些行有表情符号而某些行没有表情符号时，如何使表中的行垂直对齐？

Question

我有一个使用 flex-box 的 html 页面和一个包含文本行的表格，其中一些包含表情符号，一些不包含。到目前为止，我一直没有成功让行垂直对齐，这样所有行都垂直居中。

我尝试了各种边距和填充的组合，但都无济于事。

在提供的代码中，您会看到没有表情符号的行位于顶部，带有表情符号的行居中。如果我将没有表情符号的行居中，则带有表情符号的行位于底部。我的目标是在所有情况下都使所有行在行内正确垂直居中。

	.wrapper1 {
		max-height: 200px;
		margin-top: 50px;
		margin-bottom: 15px;
		padding-right: 25px;
		padding-left: 25px;
	}
	.wrapper2 {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
	.wrapper3 {
		max-height:150px;
		overflow: auto;
		width: 100%;
	}
	.sm_table_header {
		display:flex; 
		flex-direction: column;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		color:#ffffff;
		background-color: #307eab;
		height: 20px;
	}
	.sm_table_row {
		height: 25px;
		display: flex;           display: -webkit-flex;
		flex-direction: row;     -webkit-flex-direction: row;
		flex-grow: 0;            -webkit-flex-grow: 0;
		flex-wrap: wrap;         -webkit-flex-wrap: wrap;
		width: 100%;
		border-bottom: 1px solid silver;
		border-collapse: collapse;
	}

<div class="wrapper1">
	<div class="wrapper2">
		<div class="wrapper3">
			<div class="sm_table_header ui-widget-header">
				<div class="sm_table_row">
					<div class="sm_table_subject_head">Subject</div>
				</div>
			</div>
		</div>
		<div class="wrapper3">
			<div class="sm_table_body">		
		<div class="sm_table_row" id="1">
			<div class="sm_table_subject">Test Emoji </div>
		</div>
		<div class="sm_table_row" id="1">
			<div class="sm_table_subject">test 3</div>
		</div>
		<div class="sm_table_row" id="1">
			<div class="sm_table_subject"><span class="span.emoji" style=">😀</span>"Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
		</div>
		<div class="sm_table_row" id="1">
			<div class="sm_table_subject">Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
		</div>					
	</div>
</div>

Answer 1

您可以简单地为 .sm_table_row 设置行高，使每个元素完美居中。

.sm_table_row {
    line-height: 25px;
}

.wrapper1 {
		max-height: 200px;
		margin-top: 50px;
		margin-bottom: 15px;
		padding-right: 25px;
		padding-left: 25px;
	}
	.wrapper2 {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
	.wrapper3 {
		max-height:150px;
		overflow: auto;
		width: 100%;
	}
	.sm_table_header {
		display:flex; 
		flex-direction: column;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		color:#ffffff;
		background-color: #307eab;
		height: 20px;
	}
	.sm_table_row {
		height: 25px;
		display: flex;           display: -webkit-flex;
		flex-direction: row;     -webkit-flex-direction: row;
		flex-grow: 0;            -webkit-flex-grow: 0;
		flex-wrap: wrap;         -webkit-flex-wrap: wrap;
		width: 100%;
		border-bottom: 1px solid silver;
		border-collapse: collapse;
    line-height: 25px;
	}

<div class="wrapper1">
	<div class="wrapper2">
		<div class="wrapper3">
			<div class="sm_table_header ui-widget-header">
				<div class="sm_table_row">
					<div class="sm_table_subject_head">Subject</div>
				</div>
			</div>
		</div>
		<div class="wrapper3">
			<div class="sm_table_body">		
		<div class="sm_table_row" id="1">
			<div class="sm_table_subject">Test Emoji </div>
		</div>
		<div class="sm_table_row" id="1">
			<div class="sm_table_subject">test 3</div>
		</div>
		<div class="sm_table_row" id="1">
			<div class="sm_table_subject"><span class="span.emoji" style=">😀</span>"Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
		</div>
		<div class="sm_table_row" id="1">
			<div class="sm_table_subject">Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
		</div>					
	</div>
</div>