如何在html中将中间的两个按钮与一定的边距对齐
Posted
技术标签:
【中文标题】如何在html中将中间的两个按钮与一定的边距对齐【英文标题】：How to align two buttons in the middle with a certain margin in html 【发布时间】：2017-10-13 10:26:41 【问题描述】：我试图在 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>
我知道这个问题有多个答案，但到目前为止没有一个对我有帮助。
【问题讨论】：
【参考方案1】：您可以使用 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>【讨论】：
非常感谢您的帮助，但由于某种原因，当我插入它时，它们在 div 应该去的按钮下方有一个巨大的空白【参考方案2】：这里的解决方案是，因为您在 div 和表单中拥有按钮，所以您直接应用于按钮的任何 CSS 都将不起作用 - 您需要先定位 div：
https://jsfiddle.net/o2gxgz9r/6967/
这个例子的本质是这个CSS：
.floated
width: 48%;
float: left;
padding: 1%;
.first
text-align: right;
使用此 HTML：
<div class="floated run first">
<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>
请注意，我在第一个 div 中添加了一个类 .first。
【讨论】：
感谢您的帮助。为什么他们的两个浮动类在上面？ 因为我太仓促了。 :) 我已经编辑了答案。 非常感谢您的帮助。我将在我的代码上运行答案，然后将其标记为正确 作为记录，我认为在这种情况下没有理由需要form 标签 - 按钮可以存在于表单之外，除非您计划添加搜索或输入元素。如果按钮位于单个 div 中，您最初的 text-align: center 解决方案很可能会起作用。
我想通了。你能把它输入到上面的问题中吗？将不胜感激【参考方案3】：
您可以将按钮向左浮动，添加一点左边距，用div 包裹它，然后将其定位到中心：
<style>
.button
margin-top: 15px;
margin-left: 10px;
background-color: #0066FF;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
float: left;
font-size: 16px;
cursor: pointer;
.button-wrapper
width: 55%;
margin: 0 auto;
</style>
<body>
<div class="button-wrapper">
<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>
</div>
</body>【讨论】：
【参考方案4】：简单
给出一个 div.floated width:100% 和 text-align:center
检查 -
div.floated
width:100%;
text-align:center;
【讨论】：
以上是关于如何在html中将中间的两个按钮与一定的边距对齐的主要内容，如果未能解决你的问题，请参考以下文章