中心表單提交按鈕html/css

我遇到了麻煩，我的HTML表單提交按鈕在CSS中。中心表單提交按鈕html/css

現在，我使用

<input value="Search" title="Search" type="submit" id="btn_s"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">

這個CSS

#btn_s{ 
    width:100px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#btn_i { 
    width:125px; 
    margin-left:auto; 
    margin-right:auto; 
}

而且它沒有做任何事情，我知道我可能做一些愚蠢的錯誤，任何人都可以幫我嗎？

感謝

來源

2010-11-19 Belgin Fish

101

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

我剛剛結束一個div周圍，並使其居中對齊。那麼你不需要按鈕上的任何css來居中它們。

<div class="buttonHolder"> 
    <input value="Search" title="Search" type="submit" id="btn_s"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> 
</div> 

.buttonHolder{ text-align: center; }

來源

2010-11-19 01:14:59

實際上，這種解決方案的缺點是，持有人DIV中心*一切*它，包括文本，兒童和兒童......所以通常最好在單個元素上使用'margin：0 auto'，當我們不希望整個容器居中時，並且正如您指出的那樣，您可以通過塊元素。儘管如此，偶爾我會使用這樣的居中，所以它對我來說是-0，因爲你沒有錯...... – vaxquis 2014-04-26 21:07:36

當我用它作爲CSS樣式的按鈕鏈接時，完美地適用於我。用div和class包裝，它應該完美地工作而不會影響不同的類。 – masmrdrr 2015-06-18 09:31:13

非常感謝你，簡單但是很有魅力。 – 2015-11-26 08:22:34

試試這個：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
    <style type="text/css"> 
     #btn_s{ 
      width:100px; 
     } 

     #btn_i { 
      width:125px; 
     } 
     #formbox { 
      width:400px; 
      margin:auto 0; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <form method="post" action=""> 
     <div id="formbox"> 
      <input value="Search" title="Search" type="submit" id="btn_s"> 
      <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> 
     </div> 
    </form> 
</body>

這有兩個例子，你可以使用最適合您的情況之一。

在父容器上使用text-align:center，或者爲此創建一個容器。
如果容器必須具有固定大小，請使用auto左右邊距將其居中放在父容器中。

請注意，auto與單個塊一起使用，通過將空間分配到左側和右側將它們居中在父空間中。

來源

2010-11-19 01:19:31 SuperDuck

輸入元素默認爲內聯。添加display:block以獲得應用邊距。但是，這會將按鈕分成兩行。按照其他人的建議，使用包裝<div>與text-align: center以使它們在同一行上。

來源

2010-11-19 01:31:28 Tom

我假設按鈕應該在同一行上彼此相鄰，它們不應該都使用「自動」邊距居中，而是放置在具有限定寬度的div內'0汽車'：

CSS：

#centerbuttons{ 
    width:250px; 
    margin:0 auto; 
}

HTML（您移除按鈕的CSS邊距屬性後）：

<div id="centerbuttons"> 
    <input value="Search" title="Search" type="submit"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit"> 
</div>

來源

2010-11-19 01:33:09 Annie

<style> 
form div { 
    width: 400px; 
    border: 1px solid black; 
} 

form input[type='submit'] { 
    display: inline-block; 
    width: 70px; 
} 

div.submitWrapper { 
    text-align: center;  
}  
</style> 
<form> 

<div class='submitWrapper'>  
<input type='submit' name='submit' value='Submit'> 
</div>

還要檢查這個jsfiddle

來源

2014-02-17 23:16:55 kta

我在這裏看到了幾個答案，其中大多數是複雜或有一些缺點（額外的div，文本對齊不會因爲顯示的工作：inline-block的）。我覺得這是最簡單和自由問題的解決方案：

HTML：

<table> 
    <!-- Rows --> 
    <tr> 
     <td>E-MAIL</td> 
     <td><input name="email" type="email" /></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td><input type="submit" value="Register!" /></td> 
    </tr> 
</table>

CSS：

table input[type="submit"] { 
    display: block; 
    margin: 0 auto; 
}

來源

2017-04-19 16:43:39

絕對認同你，這是最好的解決方案，謝謝！ +1 – stepik21 2017-08-12 14:25:12

中心表單提交按鈕html/css

回答

相關問題