3

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

当我使用 inline-block 标签时，我所有的社交媒体图标都在父 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');
}
4

4 回答 4

1

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

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

于 2013-07-28T07:43:32.977 回答
1

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

于 2013-07-28T07:47:21.863 回答
1

请尝试将此修改后的 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');
}
于 2013-07-28T08:00:49.747 回答
0

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

这是我提出的解决方案的代码

于 2013-07-28T11:06:47.683 回答