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

Question

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

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

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

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

align-items: center;

"Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items." - 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>

Answer 2

您只需将 line-height 设置为 .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>

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

How can I get rows in table to align vertically when some rows have emojis and some rows do not?

html

css

emoji