How to Align Unordered List bullet Image

This an article about how to align bullet image of an unordered list(ul). When you start slicing a PSD to html you will come across a number of times to align bullet images in an unordered list(ul). This will be a nail biting if you don’t know the correct css/xhtml trick. Once you read this article you will not scratch your head thinking how to align bullet image using CSS/HTML. Let’s look at the problem scenario.

Here is a simple example that you may need to code in css/html using unordered lists. Look at the image below.

Code snippet will look like below.

<ul>
  <li>Automation</li>
  <li>Has Offical</li>
  <li>Easy to Use</li>
</ul>

Your css coding will look like below,

.ul{list-style-image:url(images/bullet.jpg);}

The above css class will place the custom bullet image for your unordered list. But it will cause following miss alignment.

Unordered list bullet image alignment using css/html

To solve above css error you can use the css code below .

.ul{list-style-type:none;}
 .ul li{background:url(images/vgreen.png) left top no-repeat;
 padding-left:30px;margin-top:10px;line-height:21px; }

padding-left will give the gap between image and the text.

You need to set background position top left in order to align the text and bullet image. top margin will adjust the the gap between list items. line height will align the image and the text into one line. once the above style class is applied you will get a CSS/HTML output like the below-mentioned image.