使用中文文本将文本与中间对齐

Question

当文本是中文时，我在同一个div中对齐文本时遇到问题 由于某种原因，它将正确的跨度推到了顶部 有没有办法解决这个问题？

<div>
  <span class="left">【夏向け】怖い、こっくりさん【ホラー】</span>
  <span class="right">Android</span>
  </div>
<div>
  <span class="left">Hello world</span>
  <span class="right">Facbook</span>
</div>
<div>
  <span class="left">【夏向け</span>
  <span class="right">Android</span>
  </div>
<div>
  <span class="left">This is an example text</span>
  <span class="right">Android</span>
</div>

{{1}}

Answer 1

您必须相应地使用line-height和font-size属性

.left{
  float:left
}

.right{
  float:right;
}

div{
  clear:both;
  width:400px;
  line-height: 24px;
}

<div>
  <span class="left">【夏向け】怖い、こっくりさん【ホラー】</span>
  <span class="right">Android</span>
  </div>
<div>
  <span class="left">Hello world</span>
  <span class="right">Facbook</span>
</div>
<div>
  <span class="left">【夏向け</span>
  <span class="right">Android</span>
  </div>
<div>
  <span class="left">This is an example text</span>
  <span class="right">Android</span>
</div>

Answer 2

float搞乱了代码

.left{
  display:table-cell;
  text-align:left;
}

.right{
  display:table-cell;
  text-align:right;
}

div{
  display: table;
  width:500px;
}

<div>
  <span class="left">【夏向け】怖い、こっくりさん【ホラー】</span>
  <span class="right">Android</span>
  </div>
<div>
  <span class="left">Hello world</span>
  <span class="right">Facbook</span>
</div>
<div>
  <span class="left">【夏向け</span>
  <span class="right">Android</span>
  </div>
<div>
  <span class="left">This is an example text</span>
  <span class="right">Android</span>
</div>