問題獲取提交按鈕居中換行

Question

由於某種原因，我無法將提交按鈕居中。我已經嘗試了從text-align: center;到margin: 0 auto;到自動的左右邊距。無論如何，我嘗試按鈕不會居中。我沒有做什麼？

.contactForm { 
 
    border: 2px solid black; 
 
    background-color: #F0F0F0; 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    padding: 40px; 
 
} 
 
.contactButton { 
 
    margin-top: 15px; 
 
    margin-right: auto; 
 
    margin-bottom: 15px; 
 
    margin-left: auto; 
 
    width: 425px; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    padding: 14px; 
 
    cursor: pointer; 
 
    background-color: #800000; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
}

<div class="contactForm"> 
 
    <form action="" method="post" id="mycontactform"> 
 
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required> 
 
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required> 
 
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea> 
 
    <label for="contactButton"> 
 
     <input type="button" class="contactButton" value="Send Message" id="submit"> 
 
    </label> 
 
    </form> 
 
</div>

Answer 1

父DIV使用text-align:center。

小提琴：http://jsfiddle.net/gopal/su3vg018/

.contactForm { 
text-align:center; 
} 

Answer 2

很難中心，因爲它是一個標籤內。該標籤也是一個內聯元素，並將在按鈕周圍調整大小。因此text-align: center和其他解決方案不起作用。

在下面的代碼片段中，我將標籤顯示爲一個塊元素，它會自動佔用父元素的可用寬度。然後你就可以輕鬆地中心裏面的按鈕：

增加的部分：

label[for="contactButton"] { 
    display: block; 
    text-align: center; 
} 

整個代碼：

.contactForm { 
 
    border: 2px solid black; 
 
    background-color: #F0F0F0; 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    padding: 40px; 
 
} 
 
.contactButton { 
 
    margin-top: 15px; 
 
    margin-right: auto; 
 
    margin-bottom: 15px; 
 
    margin-left: auto; 
 
    width: 425px; 
 
    /* Make sure the button isn't too wide on small screens */ 
 
    max-width: 80%; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    padding: 14px; 
 
    cursor: pointer; 
 
    background-color: #800000; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
} 
 

 
label[for="contactButton"] { 
 
    display: block; 
 
    text-align: center; 
 
}

<div class="contactForm"> 
 
    <form action="" method="post" id="mycontactform"> 
 
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required> 
 
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required> 
 
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea> 
 
    <label for="contactButton"> 
 
     <input type="button" class="contactButton" value="Send Message" id="submit"> 
 
    </label> 
 
    </form> 
 
</div>

Answer 3

添加到您的css文件：

.contactForm label[for="contactButton"] { 
    display: block; 
    text-align: center; 
}