垂直居中显示设置为表格单元格的内容

Question

我有以下标记，其中包含一个类名为one-fifth-flex的div。

这有以下规则：

 display: table-cell;
 text-align: center;
 vertical-align: middle;

但是，内容似乎没有垂直对齐并移到顶部。是否有可能将其置于中间，如图中所示？

提前致谢。

＆＃13;

＆＃13;

.button-bottom-50.btn-mchoice {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  width: 100%;
  background: pink;
}

.swiper-container {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.one-fifth-flex.column {
  width: 20%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  float: none;
  position: relative;
}

＆＃13;

<div style="height:400px">
  <div class="row row-flex button-bottom-50 btn-mchoice">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide one-fifth-flex column col-btn-mchoice">
          <div role="button" class="ico-btn">
            <span style="font-size:30px;">+</span>
          </div>
          <br>
          <h5 class="h5blue">Plus</h5>
        </div>
        <div class="swiper-slide one-fifth-flex column col-btn-mchoice">
          <div role="button" class="ico-btn">
            <span style="font-size:30px;">-</span>
          </div>
          <br>
          <h5 class="h5blue">Minus</h5>
        </div>
        <div class="swiper-slide one-fifth-flex column col-btn-mchoice">
          <div role="button" class="ico-btn">
            <span style="font-size:30px;">x</span>
          </div>
          <br>
          <h5 class="h5blue">Multiply</h5>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试添加位置：相对于。 btn-mchoice和display：table to parent of parent而不是display：flex。

第二种选择是不使用display：table但使用flex box系统。但是，旧版浏览器不支持弹性盒系统。

Answer 2

您已将课程one-fifth-flex设置为display: table-cell。

但是，父母有display: flex。

因此，display: table-cell被忽略。

这是因为Flex容器的子容器的display值由容器控制。换句话说，您无法覆盖弹性项目display的值.one-fifth-flex.column { width: 20%; /* display: table-cell; */ text-align: center; /* vertical-align: middle; */ /* float: none; /* position: relative; */ } 。

你可以摆脱其中的大部分，因为它不会起作用或不必要：

.one-fifth-flex {
    width: 20%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

请改为尝试：

var tappedItem = (PackageWrapper<PackageResult>)e.SelectedItem;
tappedItem.IsNotVisible = !tappedItem.IsNotVisible;
tappedItem.IsVisible = !tappedItem.IsNotVisible;

var viewCell = tappedItem.Parent.Parent as ViewCell;
viewCell.ForceUpdateSize();

spec reference

Answer 3

给.swiper-wrapper（父div）display:table。

＆＃13;

＆＃13;

.button-bottom-50.btn-mchoice {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  width: 100%;
  background: pink;
}

.swiper-container {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: table;
}

.one-fifth-flex.column {
  width: 20%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  float: none;
  position: relative;
}

＆＃13;

<div style="height:400px">
  <div class="row row-flex button-bottom-50 btn-mchoice">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide one-fifth-flex column col-btn-mchoice">
          <div role="button" class="ico-btn">
            <span style="font-size:30px;">+</span>
          </div>
          <br>
          <h5 class="h5blue">Plus</h5>
        </div>
        <div class="swiper-slide one-fifth-flex column col-btn-mchoice">
          <div role="button" class="ico-btn">
            <span style="font-size:30px;">-</span>
          </div>
          <br>
          <h5 class="h5blue">Minus</h5>
        </div>
        <div class="swiper-slide one-fifth-flex column col-btn-mchoice">
          <div role="button" class="ico-btn">
            <span style="font-size:30px;">x</span>
          </div>
          <br>
          <h5 class="h5blue">Multiply</h5>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;