Reputation: 67241
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).
Upvotes: 0
Views: 110
Reputation: 9929
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>
Upvotes: 1
Reputation: 26
.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>
Upvotes: 1
Reputation: 99
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!
flex-shrink: 0;
to stop the img to shrink on word wrap;word-break: break-all;
to the <li>
to brack word that are too longUpvotes: 2