Question

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

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>

Answer 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;
}

根据需要随意改变边距。

Answer 2

这是因为它们都在div与float:left;分开。将<div class="home_links">删除后，将它们放在一个float:left;代码中即可使用。

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

Answer 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;
}

如何将图像链接置于同一行中心？

3 个答案: