How can align image to center left to ul li

Question

Please find the image i am tying like this but it is not coming where i am doing wrong.?

.skills ul {
  width: 100%;
  margin: 10px 0px 0px 0px;
  padding: 0px;
  float: left;
}

.skills li {
    border: 1px solid #F0F0F0;
    list-style: none;
    text-decoration: none;
    text-transform: capitalize;
    padding: 7px 10px 0px 10px;
    background: #F0F0F0;
    color: #414141;
    font-size: 13px;
    text-align: left;
    float: left;
    border-radius: 50px;
    margin: 3px 6px;
    height: 31px;
    position: relative;
}

.skills li a {
    position: absolute;
    top: -8px;
    right: 8px;
    background: #FF6158;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
}
.skills li img { 
vertical-align: middle;
height: 38px;
width:38px;
border-radius:50%;
 }

 <div class="skills input-group">
            <ul id="loaded_skills">
                <li class="skills_selector current_selected_skill" value="3"> <img src="http://placehold.it/20x20/35d/fff&text=f"> AJAX
                    <input type="checkbox" name="skills" value="3" style="display:none">
                    <a href="#">x</a>
                </li>

                <li class="skills_selector current_selected_skill" value="6"> <img src="http://placehold.it/20x20/35d/fff&text=f"> Action Script 3.0 (Mac Version)
                    <input type="checkbox" name="skills" value="6" style="display:none">
                    <a href="#">x</a>
                </li>
            </ul>
        </div>

`where i am doing wrong.?` --> you smply did nothing, there is no style applied to the image — Temani Afif, Mar 20 '18 at 13:38
I don't see any styling on your `img` so I assume you haven't tried. Please try and then we can help you get to the result you want - we aren't here to code for you. — chriskirknielsen, Mar 20 '18 at 13:39
@TemaniAfif can you check now this is the issue i am getting. — Mr world wide, Mar 20 '18 at 13:52
@caramba you can undelete your code and simply adjust the alignment of text, then it should be fine — Temani Afif, Mar 20 '18 at 13:54
@TemaniAfif can copy and post his answer if you can able to see..? or just tell me how can i achieve it.? — Mr world wide, Mar 20 '18 at 13:59
make the image position:absolute then use negative value to adjust postion left/top — Temani Afif, Mar 20 '18 at 14:00

Taufik Nur Rahmanda · Accepted Answer · 2018-03-20T14:11:40.037

you can use like margin-top:-6px;, not vertical-align

.skills ul {
  width: 100%;
  margin: 10px 0px 0px 0px;
  padding: 0px;
  float: left;
}

.skills li {
    border: 1px solid #F0F0F0;
    list-style: none;
    text-decoration: none;
    text-transform: capitalize;
    padding: 7px 10px 0px 10px;
    background: #F0F0F0;
    color: #414141;
    font-size: 13px;
    text-align: left;
    float: left;
    border-radius: 50px;
    margin: 3px 6px;
    height: 31px;
    position: relative;
}

.skills li a {
    position: absolute;
    top: -8px;
    right: 8px;
    background: #FF6158;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
}
.skills li img { 
margin-top:-6px;
margin-bottom:-16px;
height: 38px;
width:38px;
border-radius:50%;
 }

 <div class="skills input-group">
            <ul id="loaded_skills">
                <li class="skills_selector current_selected_skill" value="3"> <img src="http://placehold.it/20x20/35d/fff&text=f"> AJAX
                    <input type="checkbox" name="skills" value="3" style="display:none">
                    <a href="#">x</a>
                </li>

                <li class="skills_selector current_selected_skill" value="6"> <img src="http://placehold.it/20x20/35d/fff&text=f"> Action Script 3.0 (Mac Version)
                    <input type="checkbox" name="skills" value="6" style="display:none">
                    <a href="#">x</a>
                </li>
            </ul>
        </div>

@Mrworldwide oh, you can add `margin-bottom: -16px;` to fix it. I have fixed the snippet. — Taufik Nur Rahmanda, Mar 20 '18 at 14:12
thank you so much for your time i learned margin-left,right,top. — Mr world wide, Mar 20 '18 at 14:16

How can align image to center left to ul li

1 Answers1