Android中的垂直居中

Question

我使用flexbox，table和vertical-align来尝试解决它，但它没有任何效果。

您可以在下面看到截图。 Android没有对齐中间（font-size小于12px），但iOS它工作正常...

Remove line-height

设置line-height: normal，鞋面的间距小于底部......

Android

iOS

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -5px;
  padding-top: 10px;
}
.tag {
  flex: 0 0 25%;
  min-width: 0;
}
.tag .caption {
  position: relative;
  display: block;
  height: 20px;
  line-height: 20px;
  margin: 5px;
  font-size: 10px;
  color: #82879b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag .caption:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #82879b;
  border-radius: 20px;
  transform-origin: 0 0;
  transform: scale(.5);
  box-sizing: border-box;
}

<h2> English </h2>

<div class="tags">
   <div class="tag"><span class="caption">You</span></div>
   <div class="tag"><span class="caption">see</span></div>
   <div class="tag"><span class="caption">it's</span></div>
   <div class="tag"><span class="caption">in android</span></div>
</div>

<h2> Chinese </h2>

<div class="tags">
   <div class="tag"><span class="caption">中</span></div>
   <div class="tag"><span class="caption">文</span></div>
   <div class="tag"><span class="caption">对</span></div>
   <div class="tag"><span class="caption">齐</span></div>
</div>

<h2> Japanese </h2>

<div class="tags">
   <div class="tag"><span class="caption">エネルギッシュな</span></div>
   <div class="tag"><span class="caption">サニー</span></div>
   <div class="tag"><span class="caption">ハロー</span></div>
   <div class="tag"><span class="caption">ばか</span></div>
</div>

Answer 1

我认为您可以使用更少的代码将文本集中在Android和其他任何地方。

这是一个简化版本：

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.tag {
  flex: 0 0 23%;
  min-width: 0;
  height: 35px;
  border-radius: 35px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tag .caption {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="tags">
  <div class="tag"><span class="caption">this</span></div>
  <div class="tag"><span class="caption">should</span></div>
  <div class="tag"><span class="caption">be centered</span></div>
  <div class="tag"><span class="caption">in android</span></div>
</div>