The alignment of the vertically centered item using line-height is not perfectly centered

Question

The alignment of the vertically centered item using line-height is not perfectly centered

Can you explain why the green item in this line-height and inline-block setup is a few pixels below the middle? Shouldn't there be an equal 15px above and below?

.container{
  height: 45px; 
  line-height: 45px; 
  background-color: red; 
  display: inline-block
}

.item{
  height: 15px; 
  width: 15px; 
  background-color: green; 
  vertical-align: middle; 
  display: inline-block
}

<div class="container">
  <div class="item">
  </div>
</div>

I understand that there are various methods for aligning items vertically, such as using JavaScript, absolute positioning, and more. I am not looking for a general solution to how to vertically align a div.

html css vertical-alignment

Answer 1

Answer №1

It's not the line-height causing the issue here, but rather the vertical-align: middle property. This property attempts to align the box with any text that could potentially be inside its parent container. The positioning of the inner box depends on the font-size of the text within the parent container. You can adjust the position of the box by increasing the font-size of the parent:

.container{
  height: 45px; 
  width: 100%;
  line-height: 45px; 
  font-size: 45px;
  background-color: red; 
  display: inline-block
}

.item{
  height: 15px; 
  width: 40px; 
  background-color: green; 
  vertical-align: middle; 
  display: inline-block;
}

<div class="container">
job
  <div class="item">
  </div>
</div>

The text is positioned closer to the bottom of the container in this example (the "j" extends beyond the container while the "b" does not).

Similarly, you can move the box closer to the center by decreasing the font-size. If you want to achieve optimal centering using this approach, set the font-size to 0 on the container:

.container{
  height: 45px; 
  width: 100%;
  line-height: 45px; 
  font-size: 0px;
  background-color: red; 
  display: inline-block
}

.item{
  height: 15px; 
  width: 40px; 
  background-color: green; 
  vertical-align: middle; 
  display: inline-block;
}

<div class="container">
job
  <div class="item">
  </div>
</div>

Answer 2

It's not the line-height causing the issue here, but rather the vertical-align: middle property. This property attempts to align the box with any text that could potentially be inside its parent container. The positioning of the inner box depends on the font-size of the text within the parent container. You can adjust the position of the box by increasing the font-size of the parent:

.container{
  height: 45px; 
  width: 100%;
  line-height: 45px; 
  font-size: 45px;
  background-color: red; 
  display: inline-block
}

.item{
  height: 15px; 
  width: 40px; 
  background-color: green; 
  vertical-align: middle; 
  display: inline-block;
}

<div class="container">
job
  <div class="item">
  </div>
</div>

The text is positioned closer to the bottom of the container in this example (the "j" extends beyond the container while the "b" does not).

Similarly, you can move the box closer to the center by decreasing the font-size. If you want to achieve optimal centering using this approach, set the font-size to 0 on the container:

.container{
  height: 45px; 
  width: 100%;
  line-height: 45px; 
  font-size: 0px;
  background-color: red; 
  display: inline-block
}

.item{
  height: 15px; 
  width: 40px; 
  background-color: green; 
  vertical-align: middle; 
  display: inline-block;
}

<div class="container">
job
  <div class="item">
  </div>
</div>

Answer 3

Answer №2

Updating your look could make a difference

.box {
    background-color: #ff0000;
    display: table-cell;
    height: 45px;
    vertical-align: middle;
}
.element {
    background-color: #008000;
    display: table-cell;
    height: 15px;
    vertical-align: middle;
    width: 15px;
}

Answer 4

Updating your look could make a difference

.box {
    background-color: #ff0000;
    display: table-cell;
    height: 45px;
    vertical-align: middle;
}
.element {
    background-color: #008000;
    display: table-cell;
    height: 15px;
    vertical-align: middle;
    width: 15px;
}

Answer 5

Answer №3

To ensure proper functionality, utilize divisible dimensions and eliminate the vertical align attribute.

https://jsfiddle.net/guc6uxc7/

.container{
 height: 42px; 
 line-height: 42px; 
 background-color: red; 
 display: inline-block
 }

 .item{
 height: 12px; 
 width: 12px; 
 background-color: green; 
 display: inline-block;
 }

Answer 6

To ensure proper functionality, utilize divisible dimensions and eliminate the vertical align attribute.

https://jsfiddle.net/guc6uxc7/

.container{
 height: 42px; 
 line-height: 42px; 
 background-color: red; 
 display: inline-block
 }

 .item{
 height: 12px; 
 width: 12px; 
 background-color: green; 
 display: inline-block;
 }

The alignment of the vertically centered item using line-height is not perfectly centered

Answer №1

Answer №2

Answer №3

Similar questions

Issues with CSS rendering in the Chrome browser are causing display problems

Steps to retrieve the final page number from ngx-pagination with Angular

PHP code failing to save form information into database

JavaScript onclick event triggers only the second audio to play

What is the process for choosing a particular input element based on its size and type?

Having trouble with your CSS dropdown menu?

Bootstrap box grids

Utilizing the req.body object in a GET request with Node.js

Creating a full-width header in React: A step-by-step guide

Implementing inline scrolling using CSS

What is the proper way to showcase thumbnails in different sizes?

What are some ways to enhance the opacity of a Material UI backdrop?

Troubleshooting Issue: Ionic 3 and Angular ngForm not transmitting data

Centering items in Material UI Grid

The Bootstrap website appears visually appealing on desktop browsers, but the div elements are failing to display correctly on mobile devices

Tips for setting up the Top Menu and Left Side Menu in your system

Is it possible for browsers to provide autocomplete support for login forms that are loaded via ajax?

Is it possible to transfer the style object from PaperProps to makeStyles in Material UI?

Sequentially animate objects with a fade-out and fade-in effect

Customizing the Mui Theme in a Unique Way