Adjust List Style Image Position

Adjust list style image position?

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; /* <-- change `left` & `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.

CSS: Positioning of list-style-image

I think you're thinking about using a background-image rather than the list-style-image..

so set the list-style to none and put a background-image on the li - then yes you'll be able to position it a bit more accurately using the background-position part of this:

background: url("link") no-repeat 20px 30px;

CSS list style image position relative to list item

I think you can find your answer here Adjust list style image position?

Position your image with the position properties top, left and then use padding to position them:

li {
  background: url(images/bullet.gif) no-repeat left top;
  padding: 3px 0px 3px 10px;
  margin: 0;
}

Alignment of a list-style-image

You can try a couple of approaches, for example:

<h3>Using a list-style-image</h3>
<ul class="basic">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
</ul> 

<h3>Using a Background Image on li</h3>
<ul class="bg-img">
    <li>Hello!</li>
    <li>Good-Bye!</li>
    <li>See you later!</li>
</ul>

and look at the following CSS:

ul.basic {
    list-style: none;
    list-style-image: url(http://placehold.it/20x20);
    margin: 0 0 0 0;
}
ul.basic li {
    margin: 1.00em 0 0 0;
    padding: 0 0 0 0;
}

ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/20x5);
    background-repeat: no-repeat; 
    background-position: left center;
    margin: 1.00em 0 0 -30px;
    padding: 0 0 0 30px;
}

In the first case, you can make the list image a 20x20 px square for example and embed the hyphen in the center of the image. However, if the font size changes, you won't maintain the vertical centering since the list image is pinned to the base line of the li element.

In the second example, turn off the list style and place a background image on the li element. Again, embed the hyphen in an image, and position it left and center. This approach gives you some control over the position of the hyphen motif by adjusting the left margin and padding of the li element, and the background-position property.

For reference, look at: http://jsfiddle.net/audetwebdesign/JKZLe/

css list-style-image is not on (vertical) center

You can use background image to adjust background position properly:

li {
    margin-left: 20px;
    color: #3C4355;
    line-height: 20px;
    background: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif') 0 0 no-repeat;
    padding-left: 20px;
    list-style-type: none;
}

Demo: http://jsfiddle.net/dfsq/nDX6g/2/

CSS list-style-image size

You might would like to try img tag instead of setting 'list-style-image' property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.

How to adjust list style Background Image position angular?

Just add this to your style

background-position: center;

the complete implementation will be

<li class="list-list-item" [ngStyle]="{'background-image' : (reports.response_rate_7day_change > 0) ? getIncrease():  getDecrease() }" style="background-repeat: no-repeat; background-position: center;  padding: 3px 0px 3px 10px; list-style: none; margin: 0; vertical-align: middle;">
</li>

aligning list-style-image proportionally with text

The padding will affect only whatever is inside the element—the text, in your case.

The only position adjustment property available is list-style-position, but the only permitted values are inherit, inside or outside. The most common practice is to use:

list-style: none;

and then apply the desired image as the <li>'s background

li {
    /** the image will be vertically aligned in the center **/
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/
    padding-left: 20px; 
}

---

Related Topics