Offir Pe'er Offir Pe'er - 1 month ago 8
CSS Question

Align text to the middle with Chinese text

I am having a problem to align text in the same div when the text is in Chinese.

It pushes the right span to the top from some reason.

Is there a way to fix this issue?



.left{
float:left
}

.right{
float:right;
}

div{
clear:both;
width:400px;
}

<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

You have to use the line-height and font-size property accordingly

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