如何将图像链接居中在同一行？答案

【问题标题】：How do I center image links on same line?如何将图像链接居中在同一行？
【发布时间】：2014-04-30 08:28:41
【问题描述】：

我的目标是将三个链接对齐在同一行并居中。我认为这是这样做的方法，但它不起作用。我做错了什么？

CSS

.links_wrapper {
    margin:auto;
}
.home_links {
    float: left;
}

HTML

<div class="links_wrapper">
    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>

    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>

    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>
</div>

【问题讨论】：

给他们 33% 的宽度，并确保你规范化 CSS（或者直接输入：*, *:before, *:after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }）
您的 HTML 是否缺少一行？能否请您添加它。
不。这就是所有的 HTML。

标签： html css image hyperlink center

【解决方案1】：

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
}
.home_links {
    max-width: 33%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
}

根据需要随意更改边距。

【讨论】：

做到了！谢谢！！

【解决方案2】：

这是因为它们都在单独的 divs 和 float:left; 中。删除 float:left; 后，将它们放在单个 <div class="home_links"> 标记中应该可以工作。

如果您希望链接之间的间距相等，则将宽度百分比设置为等于1/numberOfLinks 将解决为divs 提供适当的宽度。在这种情况下，float:left; 应该保留。

【讨论】：

【解决方案3】：

给你：

http://jsfiddle.net/99u6C/1/

HTML

<div class="links_wrapper">
    <div class="home_links"> <a href="#"><img src="#"/></a>

    </div>
    <div class="home_links"> <a href="#"><img src="#"/></a>

    </div>
    <div class="home_links"> <a href="#"><img src="#"/></a>

    </div>
</div>

CSS

.links_wrapper {
    margin:auto;
    text-align:center;
}
.home_links {
    display:inline-block;
}

【讨论】：