Adjust list style image position

Question

Is there a way to adjust the position of list-style-image   When I use padding for list items the image will stay at its position and won t move with padding

User · Answer

I m using something like this  seems pretty clean  amp  simple for me  ul         list-style   none          remove left padding  it s usually unwanted          padding   0     li before        content   url icon png        display   inline-block       vertical-align   middle           If you want some space between icon and text          margin-right    1em     The above code works as is in most of my cases  For exact adjustment you can modify vertical-align  e g   vertical-align   top      or    vertical-align   -10px      or whatever you need instead of  quot middle quot      You may set list-style  none on li instead of ul if you prefer

User · Answer

I had the same problem  but i could not use the background option  and didn t want to use multiple backgrounds  so i thought of another solution  this is an example for a menu that has a square like indicator for the active current menu item  the default list style is set to none in another rule   nav ul li active gt a before      content            position  absolute      top  -22px      left  55px      font-size  33px       it creates a square by using a square character with the   before  pseudo class and it is freely positionable by using absolute positioning

User · Answer

solution with fontawesome   polyNedir ul li   position relative padding-left 20px    polyNedir ul li after font-family fontawesome content   f111  position absolute left 0px top 3px color  fff font-size 10px

User · Answer

Here s what I did to get small grey blocks to be on the left side and in the center of the text with an increased lineheight   line-height 200   padding-left 13px  background-image url  images greyblock gif    background-repeat no-repeat  background-position left center    Hope this helps someone  D

User · Answer

x000D   x000D  My solution  x000D   x000D  ul   x000D      line-height  1 3  important  x000D      li   x000D          font-size  x-large  x000D          position  relative  x000D           amp  before   x000D              content      x000D              display  block  x000D              position  absolute  x000D              top  5px  x000D              left  -25px  x000D              height  23px  x000D              width  23px  x000D              background-image  url    img list-char png   important  x000D              background-size  23px  x000D              background-repeat  no-repeat  x000D            x000D        x000D    x000D   x000D   x000D

User · Answer

Another option you can do  is the following   li before      content         padding  0 0 0 25px      background url    includes images layouts featured-list-arrow png  no-repeat 0 3px      Use  0 3px  to position the list image    Works in IE8   Chrome  Firefox  and Opera    I use this option because you can swap out list-style easily and a good chance you may not even have to use an image at all   fiddle below    http   jsfiddle net flashminddesign cYAzV 1   UPDATE    This will account for text   content going into the second line    ul       list-style-type none     li      position relative     ul li before      content   gt        padding 0 10px 0 0      position absolute      top 0  left -10px      Add padding-left  to the li if you want more space between the bullet and content    http   jsfiddle net McLeodWebDev wfzwm0zy

User · Answer

The solution I settled for in the end was to modify the image itself to add some spacing   Using a background image on the li as some suggest works in a lot of cases but fails when the list is used alongside a floated image  for example to get the text to wrap around the image    Hope this helps

User · Answer

Another workaround is just to set the li item to flex or inline-flex  Depending on the circumstances that may suit you better  In case you have a real icon   image placed in the HTML the default flex position is on the central horizontal line

User · Answer

like  a darren  answer but minor modification  li    background  url  images bullet gif   left center no-repeat  padding-left  14px  margin-left  24px      it works cross browser  just adjust the padding and margin  Edit for nested  add this style to add margin-left to the sub-nested list     ul ul   margin-left 15px

User · Answer

Or you can use   list-style-position  inside

User · Answer

Hide the default bullet image and use background-image as you have much more control like    x000D   x000D  li   x000D      background-image  url https   material io tools icons static icons baseline-add-24px svg   x000D      background-repeat  no-repeat  x000D      background-position  left 50   x000D      padding-left  2em  x000D    x000D   x000D  ul   x000D      list-style  none  x000D    x000D   lt ul gt  x000D   lt li gt foo lt  li gt  x000D   lt li gt bar lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

I think what you really want to do is add the padding  you are currently adding to the  lt li gt   to the  lt ul gt  tag and then the bullet points will move with the text of the  lt li gt    There is also the list-style-position you could look into   It affects how the lines wrap around the bullet images

User · Answer

ul            Remove default list icon         list-style   none       padding   0           Small width and margin to demonstrate the text wrapping         width  200px       border 1px solid red     li        Make sure the text is properly wrpped  not spilling in the image area          display  flex     li before        content   url https   via placeholder com 10 0000FF 808080  text          display   inline-block       vertical-align   middle           If you want some space between icon and text          margin-right    2em

User · Answer

I normally hide the list-style-type and use a background image  which is moveable  li        background  url  Images arrow icon gif  no-repeat 7px 7px transparent      list-style-type  none      margin  0      padding  0px 0px 1px 24px      vertical-align  middle      The  7px 7px  is what aligns the background image inside the element and is also relative to the padding

User · Answer

I find the accepted answer a bit of a fudge  far too must jostling with extra padding and css commands     I never add padding to list items personally  normally controlling their line height and the occasional margin is enough       When I have an alignment issue with custom list style images I just add a pixel or two of extra space around whatever side is required to adjust its position relative to each list line

User · Answer

Not really  Your padding is  probably  being applied to the list item  so will only affect the actual content within the list item   Using a combination of background and padding styles can create something that looks similar e g   li     background  url images bullet gif  no-repeat left top      lt -- change  left   amp   top  too for extra control      padding  3px 0px 3px 10px       reset styles  optional        list-style  none    margin  0      You might be looking to add styling to the parent list container  ul  to position your bulleted list items  this A List Apart article has a good starting reference

User · Answer

A possible solution to this question that wasn t mentioned yet is the following       li           position  relative          list-style-type  none             li before           content              position  absolute          top  8px          left  -16px          width  8px          height  8px          background-image  url  your-bullet png            You can now use the top left of the li before to position the new bullet  Note that the width and height of the li before need to be the same dimensions as the background image you choose  This works in Internet Explorer 8 and up

[css] Adjust list style image position?

Examples related to css

Examples related to image

Examples related to html-lists