CSS Ul Li Image to Align with Text

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; 
}

How to align text with img in ul li HTML

This might help you; using Flexbox you can align items either in rows or columns pretty easily without defining exact sizes. This also helps keep the names aligned even if they are not the same size.

The width I set on the container is just to demonstrate how each item spreads out and aligns with its name; you can set this however you want

.container {  overflow-x: auto;  width: 1000px;}
.stories {  display: flex;  list-style: none;  padding: 0;  flex-wrap: nowrap;  justify-content: space-between;}
.item {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}
.pic {  border-radius: 50%;  border: double 6px white;  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);  background-origin: border-box;  background-clip: content-box, border-box;}

<div class="container">  <ul class="stories">    <li class="item">      <img src="https://via.placeholder.com/80" alt="Sample Image" class="pic">      <span>username</span>    </li>    <li class="item">      <img src="https://via.placeholder.com/80" alt="Sample Image" class="pic">      <span>username large</span>    </li>    <li class="item">      <img src="https://via.placeholder.com/80" alt="Sample Image" class="pic">      <span>username</span>    </li>    <li class="item">      <img src="https://via.placeholder.com/80" alt="Sample Image" class="pic">      <span>username</span>    </li>    <li class="item">      <img src="https://via.placeholder.com/80" alt="Sample Image" class="pic">      <span>username very large</span>    </li>    <li class="item">      <img src="https://via.placeholder.com/80" alt="Sample Image" class="pic">      <span>username</span>    </li>    <li class="item">      <img src="https://via.placeholder.com/80" alt="Sample Image" class="pic">      <span>username</span>    </li>  </ul></div>

CSS ul li image to align with text

Thank you both of you.
The problem is that I already use background for a line-separator. But I'll change it to border then I'll use background for the bullet image.

css/ html aligning text above image in unordered list

If you wrap them in another element, you can use display: table properties.

.parent {  display: table;}.parent > ul {  display: table-row;}.parent > ul > li {  display: table-cell;  padding: 0 30px 0 30px;}img {  max-width: 100px;}

<div class="parent">  <ul class="items">    <li>item1</li>    <li>item2</li>    <li>item3</li>  </ul>  <ul class="itemImages">    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>  </ul></div>

how to center align the images inside li?

Add display: inline block to the li's and text-align: center; to center them.
Add width to each li element so they spread.
Add font-size:0 to the wrapper so the spaces in the HTML do not take up any space.

See full solution:
http://codepen.io/shippin/pen/KWQgoJ

List vertical align text middle with list-style-image

The issue using list-style-image is that you cannot align with the text, the best thing to do is to use background-image for li element, and then use padding-left for your li elements.

~~Buggy Demo~~ (The issue which you are facing)

Demo

ul li {
    background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
}

ul {
    margin: 50px;
}

Vertically align image with text within li

My solution works with one line of text as well as multiple lines.

Working Fiddle Tested on: IE10, IE9, IE8, Chrome, FF, Safari

HTML: same as you posted

I'm assuming you meant middle alignment. if not: use top | bottom instead of middle

CSS

*
{
    padding: 0;
    margin: 0;
}
ul
{
    list-style-type: none;
}

div ul li
{
    margin: 5px;
}    

img
{
    vertical-align: middle; /* | top | bottom */
}
div ul li p
{
    display: inline-block;
    vertical-align: middle; /* | top | bottom */
}

Ul/LI with image above centred text, in a single UL?

Completely doable. Each <li> gets an <img> and <p> tags, and then text-align:center; on the <ul>.

HTML

<ul>
    <li>
        <img src="http://placehold.it/100x100.png>
        <p>Here's a caption</p>
    </li>
    <li>
        <img src="http://placehold.it/100x100.png>
        <p>And another caption</p>
    </li>
    <li>
        <img src="http://placehold.it/100x100.png>
        <p>One more caption</p>
    </li>
</ul>

CSS

ul{
    text-align: center;
}
li{
    display: inline-block;
}

Codepen

How to align list bullet image with li text

use background for insert image: http://jsfiddle.net/serGlazkov/cYAzV/162/

ul{ 
    list-style-type:none;
}
ul li{
    background: url("http://www.w3schools.com/cssref/smiley.gif") 0 50% no-repeat;
    padding-left: 40px;
    line-height: 40px;
}