Kg1*_*123 2 html css center button
我试图在 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>