Question

我想将提交按钮置于最后一个div的中心，但我无法做到。我尝试了很多东西，比如margin：auto，align-left和right以及其他人在这个页面上要求你做的，但对我来说这是不可能的。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8"/>
    <title>Mi Revista</title>
    <style>

body {
    background: #7f7f7f;
}

#container {
    width: 800px;
    margin: auto;
    position: relative;
}

#header {
    background: #5783a0;
    height: 75px;
}

#contenido {
    padding: 1px;
    background-color: white;
}

#left {
    float:left;
    width: 470px;
    background-color: pink;
    height: 300px;
}

#bordei {
    border-style: solid none;
    border-width: 2px;
    border-color: black white;
    background: #efefef;
    margin: 0px 0px 2px 10px;
    font-weight: bold;  
}

#borded {
    border-style: solid none;
    border-width: 2px;
    border-color: black white;
    background: #efefef;
    margin: 0px 10px 2px 0px;
    font-weight: bold;  
}

#derecha {
    float:left;
    width: 330px;
    background-color: yellow;
    height: 300px;
}

#footer {
    height: 50px;
    background-color: aquamarine;
    clear:both;
}

div form {
    display:block
}

#acept {
    margin:auto; 
}


    </style>
</head>

<body>
    <div id="container">
        <div id="header"> Mi Revista</div>
        <div id="contenido"> texto de arriba</div> 
        <div id="left">
            <div id="bordei"> borde uno</div>
            formulario izquierda
        </div>
        <div id="derecha"> 
            <div id="borded">borde derecha </div>
            Formulario derecha
            </div>
        <div id="footer">
            <form id="acept">
                <input type="submit" name="submit" value="Aceptar"/>
            </form>
            </div>  
    </div>
</body>
</html>

我等你的awnswer，因为我不能以任何形式做到这一点。 Thaks

Answer 1

稍微更改您的CSS

#acept {
    width:20px;
    margin:0 auto; 
}

问题是你没有指定表单的宽度，因为它占用了100％的宽度。因此margin:0 auto不起作用。

我做了 fiddle 。请检查一下..

Answer 2

将对齐中心设为页脚div

<div id="footer" align="center">

Answer 3

在#acept中使用text-align：center是最简单的方法。您也可以使用＆amp; ltcenter＆amp; gt标记，但不推荐使用。所以最好的方法是改变

#acept{
margin:auto;
}

到

#acept{
margin:auto;
text-align:center;
}

Answer 4

你可以使用：

#acept {
    margin-left:40%;
    width:10%;
}

JSFIDDLE Link

如何使提交按钮居中？

4 个答案: