Geek Answers Handbook

CSS Retrieving text for proper alignment in a custom list

I am trying to get the text in my list for proper alignment, but I cannot figure it out.

enter image description here

As you can see, the text is slightly off and starts from the baseline of "image bullet". I want him in the middle.

A source:

//CSS ul { list-style-image:url(image/li.png); list-style-position:outside; margin:0; padding:0; } ul li { margin:0; padding:0; } //HTML <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
+4
source share
2 answers

Now define the background image li and define the background position according to your design

 ul { list-style:none; margin:0; padding:0; } ul li { margin:0; padding:0; background:url('') no-repeat 0 0; padding-left:40px; // according to your image with min-height:40px; // according to your image height }

Demo

DEMO2 According to exact OP requirement

+3
source

you need to set the line-height property of the li elements to the same as the height of the custom icon.

For example, if your icon is 32 pixels high, you should write:

 ul li { line-height: 32px; }

It is better to use an identifier to identify the ul element, otherwise you may end up affecting all ul in the document.

+4
source

More articles:


All Articles