html - 在 ul 中的单独 div 中水平对齐图像

Question

我试图水平对齐图像，但它们都位于彼此之上。

我对此很陌生，所以很难弄明白!

如有任何帮助，我们将不胜感激!

<div class="social">
     <ul>
       <div class="facebook">
          <li><a href="#"></a></li>
       </div>
       <div class="twitter">
          <li><a href="#"></a></li>
       </div>
       <div class="youtube">
          <li><a href="#"></a></li>
       </div>
       <div class="vimeo">
          <li><a href="#"></a></li> 
       </div> 
    </ul>
</div>

这是CSS

.social {
    width: 50%;
    margin: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    display: inline-block;
    position: relative;
}
.social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.social ul li {
    margin: 0;
    padding: 0;
    display: inline;
}
.facebook a:link {
    background-image: url(../img/facebook.png);
    width: 35px;
    height: 35px;
    background-position: left;
    display: block;
    border: none;
    outline: none;
    position: absolute;
}
.facebook a:hover {
    background-position: bottom;
}
.twitter a:link {
    background-image: url(../img/twitter.png);
    width: 35px;
    height: 35px;
    background-position: left;
    display: block;
    border: none;
    outline: none;
    position: absolute;
}
.twitter a:hover {
    background-position: bottom;
}
.youtube a:link {
    background-image: url(../img/youtube.png);
    width: 35px;
    height: 35px;
    background-position: left;
    display: block;
    border: none;
    outline: none;
}
.youtube a:hover {
    background-position: bottom;
}
.vimeo a:link {
    background-image: url(../img/vimeo.png);
    width: 35px;
    height: 35px;
    background-position: left;
    display: block;
    border: none;
    outline: none;
}
.vimeo a:hover {
    background-position: bottom;
}

这是 JSFiddle 中的代码 http://jsfiddle.net/hdnrwrmj/

Answer 1

我建议删除 div 并将类名添加到 li 中，同时删除绝对位置。 Fiddle

编辑:同时使用 inline-block 显示 li

HTML

<div class="social">
     <ul>
          <li class="facebook"><a href="#"></a></li>
          <li class="twitter"><a href="#"></a></li>
          <li class="youtube"><a href="#"></a></li>
          <li class="vimeo"><a href="#"></a></li> 

    </ul>
</div>

CSS

.social {
    width: 50%;
    margin: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    display: inline-block;
    position: relative;
}
.social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.social ul li {
    margin: 0;
    padding: 0;
    display: inline-block;

}
.facebook a:link {
    background-image: url(http://www.cruisedeals.com/images_shared/top-deal-star-35px.png);
    width: 35px;
    height: 35px;
    background-position: left;
    display: block;
    border: none;
    outline: none;
}
.facebook a:hover {
    background-position: bottom;
}
.twitter a:link {
    background-image: url(http://upload.wikimedia.org/wikipedia/ca/thumb/a/a0/Logo_upc.png/35px-Logo_upc.png);
    width: 35px;
    height: 35px;
    background-position: left;
    display: block;
    border: none;
    outline: none;
}
.twitter a:hover {
    background-position: bottom;
}

.youtube a:link {
    background-image: url(http://data.cyclowiki.org/images/thumb/d/dc/ClericiMariani.png/35px-ClericiMariani.png);
    width: 35px;
    height: 35px;
    background-position: left;
    display: block;
    border: none;
    outline: none;
}
.youtube a:hover {
    background-position: bottom;
}
.vimeo a:link {
    background-image: url(http://mkhx.joyme.com/images/mkhx/thumb/8/88/%E5%9C%B0%E7%8B%B1.png/35px-%E5%9C%B0%E7%8B%B1.png);
    width: 35px;
    height: 35px;
    background-position: left;
    display: block;
    border: none;
    outline: none;
}
.vimeo a:hover {
    background-position: bottom;
}