Html Question posted in
Some basic documentation can be found here.

Html – Centering vertically multiple-line list element to the 'dot'

I have a list that at some screen-size breaks into multiple lines

The issue is that in this case I want my list bullet to align vertically in the middle of the text shown.

So practically if I have 3 lines inside the same list element, I want the bullet/market to show up next to the second line instead of the first, and if I have 2 lines, the dot should line itself between the two lines.

I tried vertical-align so far, no success and couldn’t find an appropriate idea for my question yet.

Tags:

3

Answers


  1. 0

    I have an ul list here in this snippet and I have used a ::before pseudo-class on the li element and as you can see the dots are vertically aligned with the text. I hope this is what you wanted to achieve.

    ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

li::before {
  content: "•";
  margin-right: 10px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>List Alignment Example</title>
</head>
<body>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
  </ul>
</body>
</html>
    Login or Signup to reply.
  2. 0

    The standard bullet does not allow for adjustment in this manner.

    It is necessary to create a pseudo-element for the marker and then align it using. say, flexbox.

    li {
  width: 300px;
  display: flex;
  align-items: center;
}

li:before {
  content: "2022";
  margin-right: 1em;
}

.wider {
  width: 450px;
}
    <ul>
  <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis perferendis tempore nesciunt, cum molestias ut necessitatibus nostrum incidunt adipisci odio.</li>
</ul>

<ul>
  <li class="wider">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis perferendis tempore nesciunt, cum molestias ut necessitatibus nostrum incidunt adipisci odio.</li>
</ul>
    Login or Signup to reply.
  3. 0

    Here is an idea using border-image to replace the default marker

    ul {
  font-size: 20px;
}

ul li {
  list-style: none;
  /* .2em = radius
      20px = control the position
  */
  border-image: 
   radial-gradient(circle closest-side at .2em 50%,#000 80%,#0000) 
   fill 0//20px
}
    <ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis neque felis. Pellentesque commodo velit diam, a egestas nisi molestie sed. Phasellus luctus lobortis orci nec venenatis.</li>
<li>Lorem ipsum dolor sit amet, consectetur </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search