How to adjust list item vertical position to match custom bullet image?

Question

I have a Twitter Bootstrap website with a <ul> element with a custom image for bullets.

It works, but the vertical alignment of the list items does not match the bullet image. The text is too low. Is there a reliable way to raise the list item text so that it is vertically centered with the bullet images?

Here's my code.

CSS

<style type="text/css">
    .card {
        height: 100%;
    }
    .card-body {
        padding: 2em;
    }
    .feature-list {
        list-style-image: url(/images/check-lg.png);
    }
</style>

Markup

<div class="col-sm-6 mb-5">
    <div class="card">
        <h2 class="card-header fw-bold text-center text-white bg-danger">
            Premium
        </h2>
        <div class="card-body">
            <ul class="feature-list">
                <li>All Services included in Basic</li>
                <li>Railcar Track & Trace</li>
                <li>Inbound Railcar Pipeline</li>
                <li>Fleet Management</li>
                <li>Lease Management</li>
                <li>Railcar exception management</li>
                <li>Dynamic real time ETAs</li>
                <li>Automated Reporting</li>
                <li>Custom Integration and Reporting services</li>
            </ul>
        </div>
        <div class="card-footer text-center pt-3 pb-3">
            <h6 class="mb-3">
                Contact Sales for a free quote.
            </h6>
            <p>
                <a id="premium-signup" class="btn btn-success">Contact Us</a>
            </p>
        </div>
    </div>
</div>

I found another question, which recommends something like this:

.feature-list li:before {
    content: url(/images/check-lg.png);
    position: relative;
    top: 6px;
    left: -10px
}

This actually aligns everything correctly, but it messes up the word-wrap alignment (the left of the wrapped line does not match the first line).

Answer 1

Use lh units to position markers correctly:

.feature-list {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  li {
    position: relative;
    padding-left: calc(1lh + 8px);
    &:before{
      --size: 1lh;
      content: '';
      position: absolute;
      left: 0;
      top: calc(.5lh - .5 * var(--size));
      width: var(--size);
      aspect-ratio: 1;
      background: url('https://static.vecteezy.com/system/resources/previews/033/294/018/non_2x/fill-green-tick-mark-approved-check-mark-icon-symbols-symbol-for-website-computer-and-mobile-isolated-green-tick-verified-badge-icon-social-media-official-account-tick-symbol-vector.jpg') no-repeat center/cover;
    }
  }
}

<ul class="feature-list">
  <li>All Services included in Basic</li>
  <li>Railcar Track & Trace</li>
  <li>Inbound Railcar Pipeline Inbound Railcar Pipeline Inbound Railcar Pipeline Inbound Railcar Pipeline Inbound Railcar Pipeline Inbound Railcar Pipeline Inbound Railcar Pipeline Inbound Railcar Pipeline Inbound Railcar Pipeline</li>
  <li>Fleet Management</li>
  <li>Lease Management</li>
  <li>Railcar exception management</li>
  <li>Dynamic real time ETAs</li>
  <li>Automated Reporting</li>
  <li>Custom Integration and Reporting services</li>
</ul>

Answer 2

.card {
  height: 100%;
}

.card-body {
  padding: 2em;
}

.feature-list li {
  position: relative;
  padding-left: 30px;
  list-style: none;
  margin-bottom: 10px;
}

li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 45%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('https://static.vecteezy.com/system/resources/previews/033/294/018/non_2x/fill-green-tick-mark-approved-check-mark-icon-symbols-symbol-for-website-computer-and-mobile-isolated-green-tick-verified-badge-icon-social-media-official-account-tick-symbol-vector.jpg');
  background-size: cover;
}

<div class="col-sm-6 mb-5">
  <div class="card">
    <h2 class="card-header fw-bold text-center text-white bg-danger">
      Premium
    </h2>
    <div class="card-body">
      <ul class="feature-list">
        <li>All Services included in Basic</li>
        <li>Railcar Track & Trace</li>
        <li>Inbound Railcar Pipeline</li>
        <li>Fleet Management</li>
        <li>Lease Management</li>
        <li>Railcar exception management</li>
        <li>Dynamic real time ETAs</li>
        <li>Automated Reporting</li>
        <li>Custom Integration and Reporting services</li>
      </ul>
    </div>
    <div class="card-footer text-center pt-3 pb-3">
      <h6 class="mb-3">
        Contact Sales for a free quote.
      </h6>
      <p>
        <a id="premium-signup" class="btn btn-success">Contact Us</a>
      </p>
    </div>
  </div>
</div>

Answer 3

I tried something, and I came up with this (replace it to your css):

.card-body {
    padding: 2em;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    display: flex; 
    align-items: center; 
    padding: 0.5em; 
    word-break: break-all;
}

.feature-list li::before { /*img styling*/
    content: ''; 
    display: inline-block; 
    background: url('imms.png') no-repeat center center; 
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-right: 0.5em; 
    flex-shrink: 0; /*on word wrap stop the img to shrink*/
}

This will align your text with the image like this:

Let me know if it works for u; happy coding!

---

update

• add to the css: flex-shrink: 0; to stop the img to shrink on word wrap;
• add word-break: break-all; to the <li> to brack word that are too long