CSS: Vertical Align The Text in Li Item, Doesn't Work

CSS: vertical align the text in li item , doesn't work

A satisfactory way to do this (imo) is to not use list-style-image, instead using the background property to set the "bullet" (note I substituted my own placeholder image since I just copied/pasted from a fiddle). Your padding and other dimensions will vary depending on the size of the "bullet" image.

Here's the fiddle: http://jsfiddle.net/huBpa/1/

body {
  background-color: #464443;
  color: white;
}

 ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 li {
   background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
   line-height: 32px;
   vertical-align: middle;
   padding-left: 40px;
 }​

vertical-align doesn't work

vertical-align is a slightly misnamed property and it's only vertically aligning inline elements, not blocks like you're probably expecting.

See this codepen I put together:
https://codepen.io/staypuftman/pen/OXzNRj

Broadly, there are two kinds of HTML elements: block-level elements and inline elements. You define them with display: block; and display: inline. Where beginners get confused is that they don't realize every element already has a display orientation defined by the browser.

The elements you are using, like <div>, <section>, etc are predefined as blocks, but some like <label> are inline. So you'd have to first make all of your element inline elements, but you'd find that doesn't work very well either.

The main way to do layouts in 2018 is with flexbox, which controls alignment on two axes very tightly. The main axis is controlled by the justify-content property and the secondary axis is controlled by the align-items property. By default, flexbox is oriented into rows so vertical control is handled with align-items: center; most of the time.

You set the display: flex; and the align-items: center properties on the container which contains the objects you're trying to vertically center. In your case thats <label class="form-check-input">, so the code would be:

.form-check-input {
   display: flex;
   align-items: center;
}

vertical-align doesn't work in inline-block

The trick with vertically aligning inline elements is to have a larger, inline element to align them with. What I find works a lot easier is to use display table and display table-cell (often table-cell is enough, but you may need to use display table on the parent element depending on what you're trying to achieve:

.socialBlock_item {
    margin: 0;
    padding: 0;
    display: table-cell;
    background: green;
    height: 44px;
    vertical-align: middle /* you still want to use this as well */
}

Vertical alignment of text in li

Set display: table; on your li
and

display: table-cell;
vertical-align: middle;

on your a

final styles:

#nav li {
    display: table;
    text-align: center;
    height: 25%;
    width: 100%;
    margin: 0 auto;
}

#nav li a {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

Rev 6 of your fiddle

---

Related Topics