Как получить строки в таблице для выравнивания по вертикали, если в некоторых строках есть смайлики, а в других нет?

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, аналогично justify-content, но в перпендикулярном направлении. Align-items устанавливает выравнивание по умолчанию для всех элементов контейнера flex, включая анонимные. гибкие предметы. " - флексбокс: 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>