0

我在表单标签中有一个提交按钮。这个表单标签有一些 CSS 属性：

  1. 在桌面上它有一个固定的
  2. 在移动设备上，它有一个百分比宽度

问题是，表单内的提交按钮有 width:auto; 和保证金：0自动；这样它就在表单标签内居中。但是 webkit（移动 safari 和 safari）不明白这一点。在那些浏览器中，提交按钮不是居中而是在左侧。所以我写了一个 jquery 脚本来计算宽度并将其设置为提交按钮（而不是宽度：自动）。这就是解决办法。

我做了一项研究，现在我知道，我可以使用 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>
4

1 回答 1

0

只需display:table-cell;在表单 {} 中删除它应该可以工作。

于 2013-08-21T11:34:14.107 回答