CODEWITHSUNDEEP
htmlcss
user17936983
user17936983

Reputation: 3

In a list with images instead of bullet points - trying to center the images with the first line of text

I'm trying to make a bulleted list with images instead of bullets (the bullet icons are 50x50px) but it looks off because the images aren't centered with the first line of text. Can anyone tell me what changes I need to make in order to move the bullets downward, so that they are horizontally centered with the first line of text?

I wasn't sure if this was clear, so here is what the code below looks like compared to what I'm trying to do: https://upload.wikimedia.org/wikipedia/commons/a/aa/Current_and_goal.png

I would really appreciate assistance! I've tried "no-repeat left top;" and "no-repeat center top;" after the image url and messing with margins and padding but I cannot figure it out.

ul {
  margin-left: 5%;
  width: 40%;
  display: inline-block;
  text-align: left;
  display: inline-block;
}

.health {
  list-style-image:

url(https://upload.wikimedia.org/wikipedia/commons/0/04/Black_circle_50x50.png); padding-left:20px; }

.planet {
  list-style-image: url(https://upload.wikimedia.org/wikipedia/commons/9/94/Blue_circle_50x50.png);
  padding-left:20px;
}

.budget {
  list-style-image: url(https://upload.wikimedia.org/wikipedia/commons/4/44/Red_circle_50x50.png);
  padding-left:20px;
}

.t {
  font-size:18px;
  font-weight:bold;
  line-height:1px;
}

<center>
  <div class="parent"><ul>
  <li class="health"><p class="t">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </li>
  <li class="planet"><p class="t">Lorem ipsum dolor</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li class="budget"><p class="t">Lorem ipsum</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Venenatis cras sed felis eget.</li>
</ul>
  </div>
    </center>

Upvotes: 0

Views: 444

Answers (1)

A Haworth
A Haworth

Reputation: 36512

Having the first line in a p element presents a problem as browsers will introduce line spacing.

This snippet removes the browser-controlled list style and instead introduces a before pseudo element on the p element which has the circle as background. That way you can control the positioning and it will be in relation to wherever the browser positions the p element.

ul {
  margin-left: 5%;
  width: 40%;
  display: inline-block;
  text-align: left;
  display: inline-block;
  list-style-type: none;
}

li {
  position: relative;
}

.health {
  --image: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Black_circle_50x50.png);
  padding-left: 20px;
}

.planet {
  --image: url(https://upload.wikimedia.org/wikipedia/commons/9/94/Blue_circle_50x50.png);
  padding-left: 20px;
}

.budget {
  --image: url(https://upload.wikimedia.org/wikipedia/commons/4/44/Red_circle_50x50.png);
  padding-left: 20px;
}

.t::before {
  content: '';
  background-image: var(--image);
  background-size: contain;
  position: absolute;
  left: -2em;
  top: calc(-1em + 1ex);
  width: 2em;
  height: 2em;
  display: inline-block;
  z-index: 1;
}

.t {
  font-size: 18px;
  font-weight: bold;
  /* removed line-height:1px; */
}
<center>
  <div class="parent">
    <ul>
      <li class="health">
        <p class="t">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </li>
      <li class="planet">
        <p class="t">Lorem ipsum dolor</p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
      <li class="budget">
        <p class="t">Lorem ipsum</p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Venenatis cras sed felis eget.</li>
    </ul>
  </div>
</center>

Note: the given code had a line-spacing of 1px. This has been removed as it causes a problem on narrow viewports - the longer p element texts overwrite themselves.

This is not related to this actual question, but just to note that center is a deprecated tag and should be replaced with current CSS (e.g. flexbox centering).

Upvotes: 0

Related Questions