Home/ Questions/Q 7761317
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T14:06:18+00:00

I use a list-style-image for li items , and a single-line text. But it

  • 0

I use a list-style-image for li items , and a single-line text.

enter image description here

But it looks bad, so I want to vertically align the text to the middle of the image.

I should use vertical-align: middle , right ? But it didn’t work for me.

<html>
    <head>
        <title> This is an demo </title>
        <style>
            body {
                background-color: #464443;
                color: white;
            }
            ul {
                list-style-image: url('bg.png');
            }

            li {
                vertical-align: middle;
            }

        </style>
    </head>

    <body>
        <ul>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
        </ul>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A satisfactory way to do this (imo) is to not use list-style-image, instead using the background property to set the “bullet” (note I substituted my own placeholder image since I just copied/pasted from a fiddle). Your padding and other dimensions will vary depending on the size of the “bullet” image.

    Here’s the fiddle: http://jsfiddle.net/huBpa/1/

    body {
  background-color: #464443;
  color: white;
}

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

 li {
   background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
   line-height: 32px;
   vertical-align: middle;
   padding-left: 40px;
 }​
    • 0