当某些行具有表情符号而某些行没有时，我如何在表格中获得垂直对齐的行

Question

我有一个html页面，利用flex-box和一个具有文本行的表，其中有些包含表情符号，有些则没有。到目前

我尝试了各种保证金和填充的组合，无济于事。

在代码中，您会看到没有表情符号的行是顶部，并且具有表情符号的行是中心的。如果我将没有表情符号的行进行居中，则具有表情符号的行在底部。我的目标是在所有情况下将所有行垂直垂直垂直居中。

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

Answer 2

.sm_table_row使用

align-items: center;

" flex项目可以在Flex容器的当前线的横轴上对齐，类似于正义，但在垂直方向上。Align-Items设置了所有Flex容器的默认值弹性物品。" - Flexbox作弊表：https：//yoksel.github.io/flex-cheatsheet/#align-items

    .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%;
        align-items: center;
        border-bottom: 1px solid silver;
        border-collapse: collapse;
    }

<meta charset="utf-8">
<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>