Search code examples
htmlcsstwitter-bootstrap

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

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?

Screen Shot

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).

Solution

  • Screen Shot

    .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>