How to position an image list marker so that the text is vertically centered


Tags: html,css,html-lists

Problem :

I'm useing the CSS list-style-image property. In CSS, how would I make those 'A' words in the following image aligned to the middle of the check marks?



Solution :

You'd better use background for LI elements.

li{
  list-style:none;
  height: "the height of your bullet image";
  line-height: "same value as above";
  background:url("bg.png") no-repeat 0 50%;
  padding-left: "the width of your bullet image, or even a little bit more";
}

    CSS Howto..

    How float divs inside a td

    How can I make a 2-level navigation bar? [closed]

    How to hide crossed-out CSS lines on firebug?

    How to resize content area with CSS dynamically and no javascript

    How to change CSS style without id or class

    How can I shift up a div and all divs that follow it?

    How to create css based breadcrumb which supports IE8 [closed]

    JSF - How can I format my global messages in in a visually appealing way?

    How to Make the Content 100% height and equal height columns in this layout?

    How do I use a pre-defined CSS style for a programmatically drawn TextField?

    How to layout a form like this with CSS and maybe some JS?

    How can I explain to a programmer that CSS positioning has many benefits over table based layouts?

    How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers

    Table cells without borders having white lines - how do I disable them?

    How to use non-online images in CSS?

    How to float elements with different heights?

    How to indent multiple levels of select optgroup with CSS?

    How to set % height in fluid layout?

    css for mobile devices how to make '@media all' work on wordpress child theme

    How to divide a border into 4 equal parts?

    Show Div When Click Link Button

    How to change pseudo class property?

    How do I change the display position from absolute to relative?

    How do I give a WordPress Custom Menu item an id or class for CSS targeting?

    How to put Logo & navigation in one line

    How to move text using CSS animation?

    How can I get an absolute element to float right within its parent?

    How do I code CSS to “change” when I load/pull content using ajax?

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    How to apply CSS only to numbers in paragraph? (without )