Html Question posted in
Some basic documentation can be found here.

Html – Text inside div not vertically aligning

I’m trying to write two characters next to each other, where the second character is in a div. The problem I have is that the two characters will not vertically align. This problem only occurs in Chrome and is assumed to be a rendering problem. Is there any way I can get around it?

The attached snippet is a simplified version of my code (I can’t remove divs from it). The problem is not visible in this snippet – however, if you copy and paste it into a html doc and open it in Chrome, you will be able to replicate it – but you will probably need to duplicate the html a few times on different lines until you get an instance of the output where the misalignment happens.

enter image description here

If I don’t have the margin-top and border-top, they will align. So this has everything to do with that black rectangle (border) above the second ‘3’.

.one {
  display: inline-block;
}
.two {
  display: inline-block;
  position: relative;
}
.three {
  position: relative;
  margin-top: 2px;
  border-top: 10px solid #000000;
}
<span class="one">3<div class="two"><div class="three">3</div></div></span>
Tags:

2

Answers


  1. 0

    Try this

    .one {
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

    This code might work

    Login or Signup to reply.
  2. 0

    If you want to show as vertical 3.3 then use the bellow css

       .one {
      display: inline-flex;
      flex-direction: column;
    }
    .two {
      display: inline-block;
      position: relative;
    }
    .three {
      position: relative;
      border-top: 10px solid #000000;
    }
    <span class="one">3<div class="two"><div class="three">3</div></div></span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search