HTML / CSS相同的行和居中

Question

我正在寻求帮助！ 我想集中一些社交媒体图片，但我也希望它们在同一条线上！ 我正在使用bootstrap，并希望它能够做出响应。

这是HTML代码。我有其他2个col-lg-4和其他信息！

<div class="col-lg-4 text-center test">
<hr>
<h4>Följ oss</h4>
<hr>
<ul>
    <li><a href="#" class="twitter" target="_blank"></a></li>
    <li><a href="https://www.facebook.com/smartfeeduf" class="facebook" target="_blank"></a></li>
    <li><a href="http://instagram.com/smartfeed_uf" class="instagram"></a></li>
    <li><a href="#" class="tumblr" target="_blank"></a></li>
    <li><a href="#" class="rss" target="_blank"></a></li>
    <li><a href="kontakt.html" class="email"></a></li>
    </ul>

我已经尝试过使用这个CSS，而我几乎就是我想要的。

.twitter, .facebook, .instagram, .tumblr, .rss, .email{
margin: 5px;
width: 50px;
height: 50px;
display:inline-block;

vertical-align: baseline;
text-align:center;}

每个人的图片都是这样加载的：

.twitter{ background:transparent url(../img/social/twitter-b.png) center top no-repeat;}

.twitter:hover{ background-image: url(../img/social/twitter-dl.png);}

当我拥有所有这些时，它会像这样出现

在右侧，您可以看到我的图标。我唯一想做的就是把它们放在同一条线上。但它没有用。请帮帮我:)。

Answer 1

添加到您的css：

li{

    display:inline;

}

默认情况下，

li元素将垂直列出，除非您将它们设置为内联。执行此操作后，您可能需要调整填充/边距。

Answer 2

将样式放在li元素上。

li.social {
    margin: 5px;
    width: 50px;
    height: 50px;
    display:inline-block;
    text-align:center;
}

<ul>
    <li class="social"></li>
</ul>