Question

我正在尝试在我的网站上创建一个连续4个圆形按钮的主页，我希望它们位于背景图像上绘制的水平线上。当然，即使浏览器窗口调整大小，我也希望它们保持对齐，但我不知道如何做到这一点，或者甚至可能这样做。

我尝试在背景和按钮上使用百分比，但按钮调整到左上角，因此它们不会在背景中保持不变。

编辑 - 让它几乎正常工作，我唯一的问题是它没有在百分比上完美对齐，当窗口非常小时，按钮会在线下稍微移动，当窗口较大时，按钮会略高于线。

我的HTML

    <!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <meta charset="UTF-8">
    <title></title>
</head>
<body id="menu-body">
    <div id="menu-div">
        <h1></h1>
        <div id="menu">
            <a href="" class="menu-link"><img src="" alt="" class="menu-img"/></a>
            <a href="" class="menu-link"><img src="" alt="" class="menu-img"/></a>
            <a href="" class="menu-link"><img src="" alt="" class="menu-img"/></a>
            <a href="" class="menu-link"><img src="" alt="" class="menu-img"/></a>
        </div>
    </div>
</body>
</html>

我的CSS

#menu-body {
    background-image: url('../img/background.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #1B1B1B;
}

#menu-div {
    width: 100%;
}

#menu {
    width: 100%;
}

.menu-img {
    float: left;
    width: 24%;
    margin-top: 15%;
}

Answer 1

给他们属性float：left;

Answer 2

我不确定你的目标是什么，但一个简单的解决方案是使用gud'ol flexbox属性。您可以使用'display：flex'，'justify-content：center'和'flex-wrap：nowrap'设置圆角按钮的容器，并显示保持对齐但删除百分比，只需将锚点留在那里，看看是什么发生。

如何在背景上对齐元素？

2 个答案: