中心表单提交按钮 HTML / CSS
Posted
技术标签:
【中文标题】中心表单提交按钮 HTML / CSS【英文标题】：Center form submit buttons HTML / CSS 【发布时间】：2011-05-12 09:34:09 【问题描述】：我的 html 表单提交按钮在 CSS 中居中时遇到问题。
我现在正在使用：
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
使用此 CSS 内容
#btn_s
width: 100px;
margin-left: auto;
margin-right: auto;
#btn_i
width: 125px;
margin-left: auto;
margin-right: auto;
它什么也没做。我知道我可能在做一些愚蠢的错误。我该如何解决这个问题？
【问题讨论】：
【参考方案1】：http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
我只是在它们周围包裹了一个 div 并使其居中对齐。那么你不需要在按钮上使用任何 CSS 来将它们居中。
<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
.buttonHolder text-align: center;
【讨论】：
实际上，这个解决方案的缺点是持有者 div 将 所有内容 居中，包括文本和子项以及子项的子项……所以通常最好使用 'margin : 0 auto' 在单个元素上，当我们不希望整个容器居中时 - 正如所指出的，您可以使用块元素来实现。不过，偶尔我会像这样使用居中，所以我是-0，因为你没有错...... 当我将它用于 CSS 样式的按钮链接时，它非常适合我。用 div 和 class 包装 ，它应该可以完美地工作而不会影响不同的类。【参考方案2】：输入元素默认是内联的。添加display:block 以获取要应用的边距。但是，这会将按钮分成两条单独的行。按照其他人的建议，使用包装 <div> 和 text-align: center 将它们放在同一行。
【讨论】：
我真正喜欢这个答案的一点是，它首先解释了问题发生的原因。【参考方案3】：我在这里看到了一些答案，其中大多数都很复杂或有一些缺点（由于 display: inline-block，额外的 div、text-align 不起作用）。我认为这是最简单且没有问题的解决方案：
HTML：
<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>
CSS：
table input[type="submit"]
display: block;
margin: 0 auto;
【讨论】：
完全同意你的看法，这是最好的解决方案，谢谢！ +1【参考方案4】：试试这个：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s
width:100px;
#btn_i
width:125px;
#formbox
width:400px;
margin:auto 0;
text-align: center;
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>
这里有 2 个示例，您可以使用最适合您情况的一个。
在父容器上使用text-align:center，或为此创建一个容器。
如果容器必须具有固定大小，请使用auto 左右边距使其在父容器中居中。
请注意，auto 与单个块一起使用，通过将空白空间分配到左侧和右侧，将它们在父空间中居中。
【讨论】：
【参考方案5】：/* here is what works for me - set up as a class */
.button
text-align: center;
display: block;
margin: 0 auto;
/* you can set padding and width to whatever works best */
【讨论】：
呸...display: block...永远忘记这一点！【参考方案6】：
<style>
form div
width: 400px;
border: 1px solid black;
form input[type='submit']
display: inline-block;
width: 70px;
div.submitWrapper
text-align: center;
</style>
<form>
<div class='submitWrapper'>
<input type='submit' name='submit' value='Submit'>
</div>
也可以查看jsfiddle
【讨论】：
您还需要在按钮上设置边距。边距：0 自动；【参考方案7】：我假设按钮应该在同一行上彼此相邻，它们不应使用“自动”边距居中，而是放置在具有已定义宽度且具有边距的 div 内0自动'：
CSS：
#centerbuttons
width:250px;
margin:0 auto;
HTML（从按钮的 CSS 中删除边距属性后）：
<div id="centerbuttons">
<input value="Search" title="Search" type="submit">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
【讨论】：
【参考方案8】：如果只有一个按钮需要居中，一个简单的解决方案是：
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
您可以使用类似的样式来处理several buttons。
【讨论】：
嗯，使用内联 javascript 的坏习惯。 感谢您的反馈，我将它用于内部工具，而不是在生产中，我只是想要一个快速的解决方案。当时主要使用 C 和 Python 进行编程。请继续删除答案，我点击“删除”但没有任何反应...... 我想我记得我为什么选择这个，我写的临时内部工具使用python CGI来编写动态HTML，所以要求基本上是尽可能短的一行。【参考方案9】：如果您想更上一层楼，请使用 flexbox：
.form
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
gap: 1em;
#btn_s
width: 100px;
#btn_i
width: 125px;
<div class="form">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>弹性盒指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
【讨论】：
【参考方案10】：你可以用text-align: center来做。
.form-1
text-align: center;
#btn_s
width: 100px;
margin-left: auto;
margin-right: auto;
#btn_i
width: 125px;
margin-left: auto;
margin-right: auto;
<div class="form-1">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于中心表单提交按钮 HTML / CSS的主要内容，如果未能解决你的问题，请参考以下文章