CODEWITHSUNDEEP
htmlcss
Offir
Offir

Reputation: 3491

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>

Upvotes: 1

Views: 308

Answers (2)

N Kumar
N Kumar

Reputation: 1312

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>

Upvotes: 2

GvM
GvM

Reputation: 1733

float is messing up the code

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

Upvotes: 0

Related Questions