如何将图像左对齐到中心

Question

请找到我这样的图像，但它不会出现在我做错的地方。？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用margin-top:-6px;，而不是vertical-align

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;