Html 如何在背景上对齐元素？
我试图在我的网站上制作一个连续4个圆形按钮的主页，我希望它们位于背景图像上绘制的水平线上。 当然，我希望即使在调整浏览器窗口的大小时，它们也保持与线条对齐，但我不知道如何做到这一点，或者这是否可行 我尝试在背景和按钮上使用百分比，但按钮会调整到左上角，因此它们不会与背景保持一致 编辑- 它几乎可以工作了，我唯一的问题是它在百分比上没有完全对齐，当窗口非常小时，按钮会在线条下移动一点，当窗口较大时，按钮会在线条上移动一点。 我的HTMLHtml 如何在背景上对齐元素？,html,css,background,alignment,Html,Css,Background,Alignment,我试图在我的网站上制作一个连续4个圆形按钮的主页，我希望它们位于背景图像上绘制的水平线上。 当然，我希望即使在调整浏览器窗口的大小时，它们也保持与线条对齐，但我不知道如何做到这一点，或者这是否可行 我尝试在背景和按钮上使用百分比，但按钮会调整到左上角，因此它们不会与背景保持一致 编辑- 它几乎可以工作了，我唯一的问题是它在百分比上没有完全对齐，当窗口非常小时，按钮会在线条下移动一点，当窗口较大时，按钮会在线条上移动一点。 我的HTML <!DOCTYPE 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>
给他们属性浮动：左 我不确定您的目标是什么，但一个简单的解决方案是使用gud'ol flexbox属性。您可以使用“display:flex”、“justify content:center”和“flex wrap:nowrap”设置圆角按钮的容器，并显示保持对齐但删除百分比，只需将锚留在那里，然后查看发生了什么 你能用你的html创建一个plunker吗/或者只是在问题中包含你的html-你想让按钮也垂直对齐吗？我只想让它们水平对齐根据你发布的代码，并授予你给这些标签一个值，它们在屏幕左上角对齐。这不是你要找的吗？这是小提琴，它真的很难看，因为我无法在网站上获得原始的透明png，但如果你调整窗口大小，你可以看到图像从右边的红线（背景）移动。你可以通过媒体查询解决屏幕大小问题：谢谢你的回复。我尝试过这个，但它不起作用，它首先垂直放置按钮，我使用flex和内容，但它不起作用。
#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%;
}