Question

我在表单标签中有一个提交按钮。这个表单标签有一些css-propertys：

在桌面上，它已修复
在移动设备上，它的宽度为百分比

问题是，表单中的提交按钮有宽度：auto;和保证金：0自动;所以它在form-tag中居中。但是webkit（移动游猎和野生动物园）并不了解这一点。在那些浏览器中，提交按钮不在中心，而是在左侧。所以我编写了一个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>

Answer 1

只需删除格式{}内的display:table-cell;即可。

带显示的中心表格：表格单元格

1 个答案: