web-dev-qa-db-de.com

Wie kann ich ein Eingabe-Tag an der Mitte ausrichten, ohne die Breite anzugeben?

Ich habe diese HTML und CSS:

#siteInfo input[type="button"] {
  background: none repeat scroll 0 0 #66A3D2;
  border-color: #FFFFFF #327CB5 #327CB5 #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 1px 1px 3px #333333;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  text-shadow: 1px 1px 1px #000000;
}
<div id="siteInfo">
  <p>Some paragraph.</p>
  <input type="button" value="Some Button">
</div>

Ich möchte, dass der Knopf auf die Mitte ausgerichtet ist. aber selbst mit text-align: center in der CSS ist immer noch auf der linken Seite. Ich möchte auch nicht die Breite angeben, da ich möchte, dass sich die Länge des Texts ändert. Wie mache ich das?

Ich weiß, dass die Lösung dafür einfach ist, aber ich finde keinen richtigen Weg, dies zu tun. Ich wickle es manchmal um ein <p>-Tag, das in der Mitte ausgerichtet ist, aber das ist eine zusätzliche Markierung, die ich gerne vermeiden würde.

htmlcss
28
catandmouse

Sie müssen den text-align:center auf das enthaltende div setzen, nicht auf die Eingabe selbst.

55
dotancohen

schreib Dies:

#siteInfo{text-align:center}
p, input{display:inline-block}

http://jsfiddle.net/XfSz6/

7
sandeep

Sie können das folgende CSS für Ihr Eingabefeld verwenden:

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

Aktualisieren Sie dann Ihr Eingabefeld wie folgt:

<input class="center-block" type="button" value="Some Button">
4
Ayan

sie können eine Tabellenzelle einfügen und dann den Zellinhalt ausrichten.

<table>
   <tr>
     <td align="center">
        <input type="button" value="Some Button">
     </td>
   </tr>
</table>
1
Hadi

Damit text-align:center funktionieren kann, müssen Sie diesen Stil zum #siteInfo div hinzufügen oder die Eingabe in einen Absatz einschließen und dem Absatz text-align:center hinzufügen.

0
Jrod