How to Use “line-height” to Center Inline Elements Vertically with CSS 🌆

City scape.

Intro

If we use the line-height CSS property, we can center inline elements vertically. The inline elements are automatically centered vertically within the line, so the line-height will allow us to center all of the elements in a line.

This comes in handy in the following case, where we want to create a right click menu that looks like this:

Right click menu.

Starting

We start by adding the icons and text inline, and adding space around the icons. The icons are used from Fontawesome, and are <i> elements, so they are inline by default. From the following HTML code we set up wrappers for the text and icons:

<script src="https://kit.fontawesome.com/ef157ce96f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="context_menu_styles.css">
<div id="contextMenu">
  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="fas fa-pencil-alt"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Edit Text
    </div>
  </div>
  
  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="far fa-clone"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Duplicate
    </div>
  </div>
  
  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="far fa-image"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Show Full Image
    </div>
  </div>
  
  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="fas fa-palette"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Change Color
    </div>
  </div>

  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="far fa-trash-alt"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Delete
    </div>
  </div>

  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="fas fa-angle-left"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Send Backward
    </div>
  </div>
  
  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="fas fa-angle-double-left"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Send to Back
    </div>
  </div>
  
  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="fas fa-angle-right"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Bring Forward
    </div>
  </div>

  <div class="contextMenu-line-wrapper">
    <div class="contextMenu-icon-wrapper">
      <i class="fas fa-angle-double-right"></i>
    </div>
    <div class="contextMenu-text-wrapper">
      Bring to Front
    </div>
  </div>
</div>

We add a stylesheet to give space around out icons using “width” icons:

.contextMenu-icon-wrapper {
  display: inline-block;
  margin: auto;
  text-align: center;
  width: 100px;
}
Right click menu without styling.

More Advanced Styling

We add more styling to properly space out our lines, and to add the correct amount of space between the icons:

#contextMenu {
  border-radius: 10px;
  box-shadow: 0px 2px 6px 1px grey;
  padding: 10px;
  width: fit-content;
}
.contextMenu-icon-wrapper {
  display: inline-block;
  margin: auto;
  text-align: center;
  width: 25px;
}
.contextMenu-text-wrapper {
  display: inline-block;
}
.contextMenu-line-wrapper {
  line-height: 30px;
  cursor: pointer;
  width: 100%;
}
.contextMenu-line-wrapper:hover {
  background: grey;
}

We can see here that the content of each line is centered vertically:

Context menu in chrome dev tools inspector.

Adding a box-shadow and width: fit-content, we achieve a respectable popup menu look:

#contextMenu {
  border-radius: 10px;
  box-shadow: 0px 2px 6px 1px grey;
  padding: 10px;
  width: fit-content;
}

.contextMenu-icon-wrapper {
  display: inline-block;
  margin: auto;
  text-align: center;
  width: 30px;
}
.contextMenu-text-wrapper {
  display: inline-block;
}
.contextMenu-line-wrapper {
  line-height: 30px;
}

Summary and Live Menu

Using elements as an inline-blocks is a great way to easily center elements horizintally and vertically, especially since this can be very tricky when using block elements.

Adding some hover styling and padding, we achieve an excellent menu:

And here is a live version below!

Edit Text
Duplicate
Delete
Send Backward
Send to Back
Bring Forward
Bring to Front
Show Full Image
Change Color
City at night.

City zoomed out image by by Henning Witzel on Unsplash

City buildings by Jonathan Roger on Unsplash