Schaltflächen zum Senden des mittleren Formulars HTML / CSS

73

Ich habe Probleme beim Zentrieren der Schaltflächen zum Senden von HTML-Formularen in CSS.

Im Moment benutze ich:

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

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

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

Und es macht nichts. Ich weiß, dass ich wahrscheinlich etwas Dummes falsch mache. Wie kann ich das beheben?

html css center alignment Belgin Fisch
quelle

Antworten:

126

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

Ich habe gerade ein Div um sie gewickelt und es in der Mitte ausgerichtet. Dann brauchen Sie kein CSS auf den Schaltflächen, 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; }
Sebastian Patane Masuelli
quelle
5
Tatsächlich ist der Nachteil dieser Lösung, dass Inhaber div alles darin zentriert , einschließlich Text und Kinder und Kinder von Kindern. Daher ist es normalerweise besser, 'margin: 0 auto' für einzelne Elemente zu verwenden, wenn wir das nicht wollen gesamter Container zentriert - und wie bereits erwähnt, können Sie dies mit Blockelementen erreichen. Trotzdem benutze ich gelegentlich die Zentrierung so, also ist es -0 von mir, da du nicht falsch
Funktioniert perfekt für mich, als ich es für einen CSS-gestalteten Button-Link verwendet habe. Wickeln Sie das <a href> mit dem div und der Klasse ein und es sollte perfekt funktionieren, ohne die verschiedenen Klassen zu beeinflussen.
masmrdrr
31

Eingabeelemente sind standardmäßig inline. Hinzufügen display:block, um die anzuwendenden Ränder zu erhalten. Dadurch werden die Schaltflächen jedoch in zwei separate Zeilen unterteilt. Verwenden Sie eine Umhüllung <div>mit, text-align: centerwie von anderen vorgeschlagen, um sie in die gleiche Zeile zu bringen.

Tom
quelle
16

Ich sehe hier einige Antworten, die meisten davon kompliziert oder mit einigen Nachteilen (zusätzliche Divs, Textausrichtung funktioniert aufgrund der Anzeige nicht: Inline-Block). Ich denke, dies ist die einfachste und problemloseste 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;
}
Adrian Adamczyk
quelle
Stimme dir absolut zu, das ist die beste Lösung, danke! +1
stepik21
6

Versuche dies :

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

Dies hat 2 Beispiele, Sie können das verwenden, das am besten in Ihre Situation passt.

  • Verwenden Sie text-align:centerfür den übergeordneten Container oder erstellen Sie einen Container dafür.
  • Wenn der Container eine feste Größe haben muss, zentrieren Sie ihn mit dem autolinken und rechten Rand im übergeordneten Container.

Beachten Sie, dass autobei einzelnen Blöcken diese im übergeordneten Bereich zentriert werden, indem der leere Bereich nach links und rechts verteilt wird.

SuperDuck
quelle
1 
<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

kta
quelle
Sie müssen auch den Rand auf der Schaltfläche festlegen. Rand: 0 Auto;
Gawie Greef
1

Ich gehe davon aus, dass die Schaltflächen in derselben Zeile nebeneinander liegen sollen. Sie sollten nicht jeweils mit dem 'Auto'-Rand zentriert werden, sondern in einem Div mit einer definierten Breite, die einen Rand' 0 Auto 'hat. ::

CSS:

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

HTML (nachdem Sie die Randeigenschaften aus dem CSS Ihrer Schaltflächen entfernt haben):

<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>
Annie
quelle
1 
/* here is what works for me - set up as a class */

.button {
    text-align: center;
    display: block;
    margin: 0 auto;
}

/* you can set padding and width to whatever works best */
Dave Taitelbaum
quelle
Gah ... display: block... vergiss das immer!
AjahnCharles
0

Eine einfache Lösung, wenn nur eine Taste zentriert werden muss, ist etwa:

<input type='submit' style='display:flex; justify-content:center;' value='Submit'>

Sie können einen ähnlichen Stil verwenden, um mehrere Schaltflächen zu verarbeiten .

Nagev
quelle