Elements not centering vertically

Question

I've been looking at this code for a while but I can't figure out what's wrong with it. The second 2 elements are slightly below the first element and I have no idea why. Here's the HTML:

#overlayedbox{
  font-family: OpenSans, arial, "sans-serif";
  background: rgba(50,50,50,0.6);
  border-radius: 25px;
  padding: 20px;
  width: 200;
  height: 15px;
  text-align: center;
  verticle-align: middle;
  margin-left: auto;
  margin-right: auto;
}
  
#arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;  
  border-right: 10px solid white; 
}

#arrow-right{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
  float: right;
}

<div id="overlayedbox"> 
  <div id="arrow-left"></div>
  1.0.0
  <div id="arrow-right"></div>
</div>

This is supposed to form an ovular shape with an arrow facing left on the left side, and an arrow facing right on the right side with text in the middle. When I run it, the elements align fine horizontally, but after the first arrow, they drop down a little.

If you like to use flex, https://jsfiddle.net/8jn7c0qy/1/ – louie kim Dec 06 '19 at 03:05 — louie kim, Dec 06 '19 at 03:05

score 3 · Accepted Answer · edited Dec 06 '19 at 03:11

You can use flexbox to get this right. CSS Tricks has a great article on flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• Remove float:right from .arrow-right

• Add display: flex to #overlayedbox to make it a flex box, having justify-content: space-between and align-items: center to align items vertically centered and having arrow signs at the both ends making it spaced in the between.

#overlayedbox{
  display: flex;
  justify-content: space-between;
  font-family: OpenSans, arial, "sans-serif";
  background: rgba(50,50,50,0.6);
  border-radius: 25px;
  padding: 20px;
  width: 200;
  height: 15px;
  text-align: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
  
#arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;  
  border-right: 10px solid white; 
}

#arrow-right{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
}

<div id="overlayedbox"> 
  <div id="arrow-left"></div>
  1.0.0
  <div id="arrow-right"></div>
</div>

Devid Farinelli · Answer 2 · 2019-12-06T11:33:30.673

Inspecting your page with the devtools you can see that the #arrow-left occupies the entire row, and the other elements are positioned in the row below.

You need to add position: absolute to your #arrow-left so that it doesn't condition the other elements positions.

#overlayedbox{
  font-family: OpenSans, arial, "sans-serif";
  background: rgba(50,50,50,0.6);
  border-radius: 25px;
  padding: 20px;
  width: 200;
  height: 15px;
  text-align: center;
  verticle-align: middle;
  margin-left: auto;
  margin-right: auto;
}
  
#arrow-left {
  position: absolute;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;  
  border-right: 10px solid white; 
}

#arrow-right{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
  float: right;
}

<div id="overlayedbox"> 
  <div id="arrow-left"></div>
  1.0.0
  <div id="arrow-right"></div>
</div>

Also, check @Himanshu Mehta 's answer, it shows you the correct way of solving those kind of problems ;) — Devid Farinelli, Dec 06 '19 at 03:13

Elements not centering vertically

2 Answers2