Search code examples
htmlcssalignmentvertical-alignment

An html symbol ruin elements text alignment

I am using an HTML symbol for my pagination but it ruins the alignment with other elements:

a{
  float:left;  
}
<div dir='rtl'>
<a href='#'>&#10092;&#10092; text 1</a> 
<a href='#'>&#10092; text 2</a>
<a href='#'>  text 3</a>
</div>

Solution

  • Just add a line height to the a element.

    I added line-height:1. Check the snippet

    a{
  float:left;
  line-height:1
}
    <div dir='rtl'>
<a href='#'>&#10092;&#10092; text 1</a> 
<a href='#'>&#10092; text 2</a>
<a href='#'>  text 3</a>
</div>