我在表单标签中有一个提交按钮。这个表单标签有一些 css 属性:
- 在桌面上它有一个固定的
- 在移动设备上它有一个百分比宽度
问题是，表单内的提交按钮有宽度:自动；和 margin :0 自动；这样它就在表单标签内居中。但是 webkit(移动 safari 和 safari)不理解这一点。在那些浏览器中，提交按钮不是居中而是在左侧。所以我写了一个 jquery 脚本来计算宽度并将其设置为提交按钮(而不是 width:auto)。这就是解决方法。
我做了一个研究，现在我知道我可以使用 display:table-cell;在表单标签中，它将内容居中(提交按钮)但是:这意味着我不能将表单本身居中。 所以我的问题是，如何修改下面的代码，使表单在包装器内居中，提交按钮在表单内？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrap{
width:1000px;
background:red;
}
form {
height:100px;
width:500px;
margin:0 auto;
display:table-cell;
border:1px solid black;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
}
form input[type=submit], form input[type="button"], form input[type="reset"], form button {
width:auto;
min-width:40%;
height:32px;
margin:20px auto;
line-height:14px;
padding:9px 15px;
background-color:#617798;
border:0;
font-size:14px;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
/* Border-Radius */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
cursor:pointer;
display:inline;
/* iPad-Button-Reset:*/
-webkit-appearance:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Titel Blafasel</h1>
<form>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
最佳答案
只需删除 display:table-cell; inside form {} 就可以了。
关于html - 中心表格显示 :table-cell，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18356114/