我试图用 HTML 对齐屏幕中间的两个按钮。当我尝试使用 text-align: center; 时，它不起作用。下面是我的按钮代码。
<style>
.button {
margin-top: 15px;
background-color: #0066FF;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<body>
<div class="floated run">
<form action="aboutus.html">
<button class="button">See Projects</button>
</form>
</div>
<div class="floated run">
<form action="end.html">
<button class="button">About Us</button>
</form>
</div>
</body>
我知道这个问题有多个答案，但到目前为止没有一个对我有帮助。
最佳答案
您可以只使用 Flexbox 来获得您想要的并稍微更改您的标记。
所以你需要一个包含 .flex 类的包装器，以及一个包含 .flex-item 类的子类。
.flex {
display: flex;
justify-content: center;
}
.flex-item + .flex-item {
margin-left: 10px;
}
.button {
margin-top: 15px;
background-color: #0066FF;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}<div class="flex">
<form action="aboutus.html" class="flex-item">
<button class="button">See Projects</button>
</form>
<form action="end.html" class="flex-item">
<button class="button">About Us</button>
</form>
</div>关于html - 如何在html中将中间的两个按钮与一定的边距对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43965881/