Question

我无法将此选择的图像与CSS中心对齐。这是使用的html代码：

<a class="socialIcons" href="LINK" title="Facebook" alt="FB"><img src="img/Social/Facebook.png" width="100px" height="100px"  /></a>

<a class="socialIcons" href="LINK" title="Soundcloud" alt="cloud"><img src="img/Social/SoundCloud.png" width="100px" height="100px" /></a>

<a class="socialIcons" href="LINK" title="Tumblr" alt="falling"><img src="img/Social/Tumblr.png" width="100px" height="100px" /></a>

<a class="socialIcons" href="LINK" title="Vimeo" alt="VMO"><img src="img/Social/Vimeo.png" width="100px" height="100px" /></a>

<a class="socialIcons" href="LINK" title="Youtube" alt="YT"><img src="img/Social/YouTube.png" width="100px" height="100px" /></a>

以下是这些图片的CSS：

a.socialIcons {
margin-left: 10px;
}

a.socialIcons:hover {
opacity: .8;
filter:alpha(opacity=80);

}

我尝试了很多方法，比如绝对位置，边距等，但它们都没有用。图像只是贴在左边。

我希望这里有人可以帮我解决，因为明天会有一个评估。

全部谢谢！

Answer 1

为您的父容器提供css＆＃34; text-align：center＆＃34;

 <div class="images">
    <a class="socialIcons" href="LINK" title="Facebook" alt="FB"><img src="img/Social/Facebook.png" width="100px" height="100px"  /></a>

    <a class="socialIcons" href="LINK" title="Soundcloud" alt="cloud"><img src="img/Social/SoundCloud.png" width="100px" height="100px" /></a>

    <a class="socialIcons" href="LINK" title="Tumblr" alt="falling"><img src="img/Social/Tumblr.png" width="100px" height="100px" /></a>

    <a class="socialIcons" href="LINK" title="Vimeo" alt="VMO"><img src="img/Social/Vimeo.png" width="100px" height="100px" /></a>

    <a class="socialIcons" href="LINK" title="Youtube" alt="YT"><img src="img/Social/YouTube.png" width="100px" height="100px" /></a>
  </div>

CSS：

a.socialIcons {
margin-left: 10px;

}
.images{
    text-align:center;

}
a.socialIcons:hover {
opacity: .8;
filter:alpha(opacity=80);

}

Here is jsFiddle

Answer 2

您必须在此结构中添加包装器div并将text-align:center设置为该。

<强> DEMO

Answer 3

您只需要使用“text-align：center;”

将容器中的链接包装起来

HTML：

<div class="wrapper">
    <a class="socialIcons" href="LINK" title="Facebook" alt="FB"><img src="img/Social/Facebook.png" width="100px" height="100px"  /></a>
    <a class="socialIcons" href="LINK" title="Soundcloud" alt="cloud"><img src="img/Social/SoundCloud.png" width="100px" height="100px" /></a>
    <a class="socialIcons" href="LINK" title="Tumblr" alt="falling"><img src="img/Social/Tumblr.png" width="100px" height="100px" /></a>
    <a class="socialIcons" href="LINK" title="Vimeo" alt="VMO"><img src="img/Social/Vimeo.png" width="100px" height="100px" /></a>
    <a class="socialIcons" href="LINK" title="Youtube" alt="YT"><img src="img/Social/YouTube.png" width="100px" height="100px" /></a>
</div>

CSS：

.wrapper {
    text-align:center;
}

图像组不会集中CSS / HTML

3 个答案: