text-align: center funktioniert nicht mit form & lt; label & gt; Etikett (?)

Ging ich durch eine Seite, die ich gerade fertig gestellt habe, und bis zur Festsetzung einige Fragen zur Barrierefreiheit.
Ich hatte ein Formular:

<input type="hidden" name="redirect" value="thank-you.php" />
<p>Enter your Email Address to receive our Weekly Newsletter</p>                            
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

Diese gekennzeichnet wurde, weil Ihr keine Tags zu identifizieren, die das Eingabefeld für die Eingabe der E-Mail-Adresse. Also änderte ich die

tag, ein tag wie so:

<input type="hidden" name="redirect" value="thank-you.php" />
<label for="formifemail">Enter your Email Address to receive our Weekly Research</label>                            
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

und CSS:

#formItem label {
    text-align:center;
    line-height:150%;
    font-size:.85em;
}

Aber der text erscheint als Linksbündig und nicht zentriert. Ich habe sah sich um, es gibt keine offensichtlichen bugs. Das passiert sowohl in FF 3.x und IE 7.x

InformationsquelleAutor der Frage edzillion | 2009-03-12

  1. 56

    Dies ist, weil label ist ein inline-element und ist daher nur so groß wie der text, den es enthält.

    Die möglich ist, um Ihre label als ein block-element wie diesem:

    #formItem label {
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: .85em;
}

    Jedoch, wenn Sie möchten, verwenden Sie das Etikett auf der gleichen Linie mit anderen Elementen, die Sie entweder müssen display: inline-block; und geben Sie eine explizite Breite (was nicht funktioniert auf den meisten Browsern), oder müssen Sie wickeln Sie es in ein div und tun die Ausrichtung in der div.

    InformationsquelleAutor der Antwort Can Berk Güder

  2. 5

    label ist ein inline-element, so dass seine Breite gleich der Breite des Textes, die es enthält. Der browser ist eigentlich die Anzeige der label mit text-align:center aber da die Beschriftung nur so breit wie der text, den Sie nicht bemerken.

    Das beste, was zu tun ist die Anwendung einer bestimmten Breite, um die label, die größer ist als die Breite der Inhalte - dies wird Ihnen die Ergebnisse, die Sie wollen.

    InformationsquelleAutor der Antwort Andrew Hare

Schreibe einen Kommentar