Schaltflächen zum Senden des mittleren Formulars HTML / CSS

Question 1

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?

Question 2

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

Question 3

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.

Question 4

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

Question 5

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.

Question 6

<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

Question 7

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>

Question 8

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

Question 9

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 .