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

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

在import pandas as pd new_df = pd.DataFrame({"RowNum": [1,2,3,4,5,6],"A": ['Test1','Test2','Test2','Test1','Test1','Test2'], "B":['D','D','MO','D','D','D'],"Year": [2020,2008,2010,2008,2010,2011]}) df_dict_temp = {('Test1','D'): pd.DataFrame({"Col1":[3,2,4,5,2], "Year":[0,0,2010,2010,2011]}), ('Test2','D'):pd.DataFrame(), ('Test2','MO'):pd.DataFrame({"Col1":[3,2,4,5,2], "Year":[0,0,2010,2010,2011]}) } AdjFact= { 'Good': {0: 0, 2010: 2.566, 2011: 1.77, 2012: 0.9658515212}, 'Bad': {0: 0, 2010: 3.222, 2011: 1.0423, 2012: 0.3534}, 'Avg': {0: 0, 2010: 1.30, 2011: 4.2, 2012: 1.01} } def lookup(row,lval): m_df= df_dict_temp[row['A'],row['B']] m_df['AdjustedResult'] = AdjFact[lval][m_df['Year']] Total = 0 #df['Discount'].sum() Diff = 0 #df['Value'] - df['Discount'] return Total, Diff new_df[['TotalGood' , 'DiffGood']] = new_df.apply(lookup, lval='Good', axis=1).apply(pd.Series) 使用上

.sm_table_row

“ Flex项目可以在flex容器的当前行的横轴上对齐，类似于justify-content但在垂直方向上对齐。align-items设置所有flex容器的项目的默认对齐方式，包括匿名弯曲物品。” -flexbox速查表：https://yoksel.github.io/flex-cheatsheet/#align-items

align-items: center;

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

Answer 2

您只需为.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>