CODEWITHSUNDEEP
htmlcss
chell
chell

Reputation: 7866

how to get text aligned vertically with text in list using css

I am using a background image of a check for my list. The problem is that for some reason text that runs onto the next line for a list item does not align with the text above it, but rather the check image. I have tried using list-style-position: outside; but it does not seem to work.

Here is my code:

li {
  list-style: none;
  margin-bottom: 0.5em;
  text-indent: 1.2em;
  background-image: url(https://placehold.it/15x15);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
  list-style-position: outside;
  line-height: 1.2;
}
.checklist-left {
  width: 50%;
  float: left;
  text-align: left;
}
.checklist-right {
  width: 50%;
  float: right;
  text-align: left;
}
<ul class="checklist-left">
  <li>Improve clarity</li>
  <li>Check formatting</li>
  <li>Improve logical flow</li>
</ul>
<ul class="checklist-right">
  <li>Eliminate irrelevant words</li>
  <li>Verify adherence to stylistic guidelines</li>
</ul>

Here is what it looks like:

enter image description here

Any help appreciated.

Upvotes: 3

Views: 103

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

Here is another solution, instead of list-style-type you could use :before pseudo element and content: '✔';

.lists {
  background: #154B99;
  display: flex;
  color: white;
  width: 70%;
  margin: 0 auto;
  flex-wrap: wrap;
}

ul {
  flex: 1;
  list-style-type: none;
}

li {
  position: relative;
  letter-spacing: 1px;
  padding-left: 10px;
}

li:before {
   content: '✔';
   position: absolute;
   left: 0;
   top: 0;
   font-size: 12px;
   transform: translate(-100%, 0);
   color: white;
}
<div class="lists">
  <ul class="checklist-left">
    <li>Improve clarity</li>
    <li>Check formatting</li>
    <li>Improve logical flow</li>
  </ul> 

  <ul class="checklist-right">
    <li> Eliminate irrelevant words</li>
    <li>Verify adherence to stylistic guidelines</li>
  </ul>
</div>

You can also align li and :before vertically in middle with transform: translate(-100%, -50%);

.lists {
  background: #154B99;
  display: flex;
  color: white;
  width: 70%;
  margin: 0 auto;
  flex-wrap: wrap;
}

ul {
  flex: 1;
  list-style-type: none;
}

li {
  position: relative;
  letter-spacing: 1px;
  padding-left: 10px;
}

li:before {
   content: '✔';
   position: absolute;
   left: 0;
   top: 50%;
   font-size: 12px;
   transform: translate(-100%, -50%);
   color: white;
}
<div class="lists">
  <ul class="checklist-left">
    <li>Improve clarity</li>
    <li>Check formatting</li>
    <li>Improve logical flow</li>
  </ul> 

  <ul class="checklist-right">
    <li> Eliminate irrelevant words</li>
    <li>Verify adherence to stylistic guidelines</li>
  </ul>
</div>

Upvotes: 1

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

The problem is that you are using text-indent which will only adjust the first line of text.

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

text-indent (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)

To fix, make the following modifications to your CSS:

  • Remove text-indent: 1.2em; from li
  • Add padding-left: 1.2em; to li

This will apply the padding to the whole left side of the li pushing the content across and allowing the background-image to use blank space.

li {
  list-style: none;
  margin-bottom: 0.5em;
  padding-left: 1.2em;
  background-image: url(https://placehold.it/15x15);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
  list-style-position: outside;
  line-height: 1.2;
}
.checklist-left {
  width: 50%;
  float: left;
  text-align: left;
}
.checklist-right {
  width: 50%;
  float: right;
  text-align: left;
}
/*Added to make the issue visible in the snippet*/
.checklist-left, .checklist-right {
  padding: 0;
  width: 30%;
}
<ul class="checklist-left">
  <li>Improve clarity</li>
  <li>Check formatting</li>
  <li>Improve logical flow</li>
</ul>
<ul class="checklist-right">
  <li>Eliminate irrelevant words</li>
  <li>Verify adherence to stylistic guidelines</li>
</ul>

list-style-position will have no effect when using a background image as it only influences the position of an actual check mark.

The list-style-position property specifies the position of the marker box in the principal block box.

list-style-position (https://developer.mozilla.org/en/docs/Web/CSS/list-style-position)

Upvotes: 2

Related Questions