Center Formular senden Schaltflächen html/css

Ich habe Probleme mit der Zentrierung meiner HTML-Formular senden Schaltflächen in CSS.Center Formular senden Schaltflächen html/css

jetzt ich verwende

<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">

mit diesem css

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

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

und es ist nichts zu tun, ich weiß, ich bin wahrscheinlich etwas dumm falsch zu machen, könnte mir jemand helfen?

Dank

Quelle

2010-11-19 Belgin Fish

101

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

Ich wickelte nur ein div um sie herum und machte es Mitte auszurichten. dann brauchst du kein css auf den buttons um sie zu zentrieren.

<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; }

Quelle

2010-11-19 01:14:59

tatsächlich, der Nachteil dieser Lösung ist, dass Inhaber div Zentren * alles * drin , einschließlich Text und Kinder und Kinder von Kindern ... also ist es in der Regel besser, 'margin: 0 auto' für einzelne Elemente zu verwenden, wenn wir nicht möchten, dass der gesamte Container zentriert wird - und, wie gesagt, können Sie das mit erreichen Blockelemente. Dennoch verwende ich gelegentlich Zentrierungen wie diese, also ist es -0 von mir, da du nicht falsch liegst ... – vaxquis

Funktioniert perfekt für mich, wenn ich es für eine CSS-gestylte Schaltflächenverknüpfung verwendete. Wickeln Sie die mit dem div und der Klasse und es sollte perfekt funktionieren, ohne verschiedene Klassen zu beeinflussen. – masmrdrr

Vielen Dank, einfach, aber funktioniert wie ein Charme. –

Try this:

<!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>

Diese 2 Beispiele hat, können Sie die eine, die am besten in Ihrer Situation passt.

Verwenden Sie text-align:center für den übergeordneten Container, oder erstellen Sie einen Container dafür.

Wenn der Container eine feste Größe haben muss, verwenden Sie die linken und rechten Ränder , um ihn im übergeordneten Container zu zentrieren.

Beachten Sie, dass mit einzelnen Blöcken verwendet wird, um sie im übergeordneten Raum zu zentrieren, indem Sie den leeren Raum nach links und rechts verteilen.

Quelle

2010-11-19 01:19:31 SuperDuck

Eingabeelemente sind standardmäßig inline. Fügen Sie display:block hinzu, um die Ränder anzuwenden. Dadurch werden die Schaltflächen jedoch in zwei separate Zeilen aufgeteilt. Verwenden Sie eine Umhüllung <div> mit text-align: center wie von anderen vorgeschlagen, um sie in die gleiche Zeile zu bekommen.

Quelle

2010-11-19 01:31:28 Tom

Ich gehe davon aus, dass die Schaltflächen nebeneinander in der gleichen Zeile sein sollten, sie sollten nicht jeweils mit dem "auto" Rand zentriert sein, sondern innerhalb eines div mit einer definierten Breite, die einen Rand hat '0 auto':

CSS:

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

HTML (nach den Rand Eigenschaften von Ihrem Tasten CSS entfernen):

<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>

Quelle

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>

Überprüfen Sie auch diese jsfiddle

Quelle

2014-02-17 23:16:55 kta

ich ein paar Antworten hier sehen, die meisten von ihnen kompliziert oder mit einigen Nachteile (zusätzliche divs, text-align wegen Display funktioniert nicht: inline-block).Ich denke, dies ist die einfachste und problemfreie Lösung:

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; 
}

Quelle

2017-04-19 16:43:39

Absolut stimme mit Ihnen überein, das ist die beste Lösung, danke! +1 – stepik21

Center Formular senden Schaltflächen html/css

Antwort

Verwandte Themen