display:inline-block not aligning properly?

Asked May 16 '22 at 22:42

Active May 16 '22 at 23:09

Viewed 28 times

So I have been trying out using status bars with JavaScript and have come across this issue where it seems like when I use "display:inline-block" it doesn't align my two elements properly. When ran the "Stat:" appears lower than the progress bar even though they should be aligned. Any help or someone pointing out a dumb mistake a made would be appreciated.

document.getElementById("myBar").style.width = "50%";

#myProgress {
  width: 20%;
  background-color: #ddd;
  display: inline-block;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #04AA6D;
}

h1 {
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  display: inline;
}

<h1>Stat:</h1>
<div id="myProgress">
  <div id="myBar"></div>
</div>

edited May 16 '22 at 23:09

asked May 16 '22 at 22:42

Ntovto

Please add more details and clarity. What isnt workign as intended? – tacoshy May 16 '22 at 22:47
1

What is the proper alignment? – TwistedOwl May 16 '22 at 22:47
@tacoshy If you run the code snippet it shows that the progress bar appears higher up than the words – Ntovto May 16 '22 at 23:08
@Wiktor When run "Stat:" appears lower than the progress bar – Ntovto May 16 '22 at 23:08
So you want to align vertcically in center. In that case use flexbox as mentioned in the linked duplicate. – tacoshy May 16 '22 at 23:09
@tacoshy thank you greatly, I had no idea what to look for – Ntovto May 16 '22 at 23:22

display:inline-block not aligning properly?

0 Answers0