Question

由于某种原因，我的提交按钮不居中。 http://prime.programming-designs.com/test_forum/viewboard.php?board=0

#submitbutton{
margin: auto;
border: 1px solid #DBFEF8; 
background-color: #DBFEF8; 
color: #000000; 
margin-top: 5px; 
width: 100px; 
height: 20px;
}

这是html。

<form method=post action=add_thread.php?board=<?php echo''.$board.''; ?>>
            <div id="formdiv">
                <div class="fieldtext1">Name</div>
                <div class="fieldtext1">Trip</div> 
                <input type="text" name=name size=25 /> 
                <input type="text" name=trip size=25 />
                <div class="fieldtext2">Comment</div>
                <textarea name=post rows="4" cols="70"></textarea>
                <div class="fieldtext2">Fortune</div>
                <input type="checkbox" name="fortune" value="fortune" />
            </div>
            <input type=submit value="Submit" id="submitbutton">
        </form>

Answer 1

因为按钮是内联显示的。您必须为display:block设置#submitbutton：）

Answer 2

将边距：自动和宽度：50％移至格式css，而不是#formdiv。

所以CSS会是这样的：

FORM {
   margin: 0px auto;
   width: 50%;
}

#formdiv {
  background-color:#F9F9F9;
  border:1px solid #DBFEF8;
}

Answer 3

您可以尝试将其定位在left: 50%;并向左侧给出50px的负边距（因为它是100px宽）。这并不能解释为什么它没有被塞满，而是可以成为一个解决方案来集中它。

Answer 4

将按钮包裹在这样的div中：

<div style="text-align: center;">
    <input type="submit" value="Submit" id="submitbutton">
</div>

并删除按钮上的display: block。

编辑：当然，您必须使容器与您希望它集中的容器一样宽，以便将width: 50%; margin: 0 auto;添加到div中。像：

<div style="text-align: center; width: 50%; margin: 0 auto;">
    <input type="submit" value="Submit" id="submitbutton">
</div>

或更好！将包装器div放在<div id="formdiv">

中

<div id="formdiv">
    .
    .
    .
    <div style="text-align: center;">
        <input type="submit" value="Submit" id="submitbutton">
    </div>
</div>

为什么我的提交按钮不居中？

4 个答案: