Question

我正在网站底部创建一个社交媒体栏，并希望所有社交媒体图标都水平排列。我有一个父div包含社交媒体图标div。我不仅试图将父div放在页面上，而且还将该div中的所有社交媒体图标集中在一起。

当我使用内联块标记时，我所有的社交媒体图标都在父div的中间垂直对齐。我也试过浮动它们，但似乎无法弄清楚如何以这种格式居中。

非常感谢任何帮助。

HTML：

<div id="socialcontainer">
    <div class="facebook"><a href="https://facebook.com/"></a></div>
    <div class="twitter"><a href="https://twitter.com/"></a></div>
    <div class="google"><a href="https://google.com/"></a></div>
    <div class="linkedin"><a href="https://linkedin.com/"></a></div>
</div>

CSS：

#socialcontainer {
width: 100%;
margin: 0px auto;
text-align: center;
}


.facebook a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/facebook_dark.png');
}

.facebook a:hover {
background: url('../img/socialicons/facebook_active.png');
}

.twitter a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/twitter_dark.png');
}


.twitter a:hover {
    background: url('../img/socialicons/twitter_active.png');
}

.google a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/google_dark.png');
}    

.google a:hover {
    background: url('../img/socialicons/google_active.png');
}

.linkedin a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/in_dark.png');
}

.linkedin a:hover {
    background: url('../img/socialicons/in_active.png');
}

Answer 1

您需要将inline-block分配给包含a标签的DIV标签，如下所示：

#socialcontainer > div{ display: inline-block;}

Answer 2

试试这个：将每个包围<div>的CSS添加到以下属性：display:inline。

Answer 3

请尝试将此修改过的CSS转到您的html，

#socialcontainer {
position: relative;
width: 256px; // 64 * 4
left: 50%;
margin: 0px auto;
margin-left: -128px;
text-align: center;
}

.facebook, .twitter, .google, .linkedin { width: 64px; float: left; }

.facebook a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/facebook_dark.png');
}

.facebook a:hover {
background: url('../img/socialicons/facebook_active.png');
}

.twitter a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/twitter_dark.png');
}


.twitter a:hover {
    background: url('../img/socialicons/twitter_active.png');
}

.google a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/google_dark.png');
}    

.google a:hover {
    background: url('../img/socialicons/google_active.png');
}

.linkedin a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/in_dark.png');
}

.linkedin a:hover {
    background: url('../img/socialicons/in_active.png');
}

Answer 4

我认为您需要在容器内创建一个新的div来控制位置，因为您希望内部内容为中心水平我认为这是最简单的解决方案，请参阅我的JS bin

这是code for the solution i propose

默认情况下，内联块对齐垂直

4 个答案: