Text vertikal neben einem Optionsfeld ausrichten

Dies ist eine grundlegende CSS-Frage, ich habe einen radio button mit einem kleinen text-label nach. Ich möchte den text vertikal zentriert, aber der text ist immer auf einer Linie mit der-Taste den radio-button in meinem Fall.

<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>

Hier ein Jsfiddle:

http://jsfiddle.net/UnA6j/

Irgendwelche Vorschläge?

Dank,

Alan.

InformationsquelleAutor der Frage Alan A | 2013-07-25

  1. 31

    Verwenden Sie es in einem label. Verwenden vertical-align um es zu verschiedene Werte -- bottombaselinemiddle etc.

    http://jsfiddle.net/UnA6j/5/

    InformationsquelleAutor der Antwort Prasanth

  2. 13

    Ich denke, das ist, was Sie vielleicht Fragen, für

    http://jsbin.com/ixowuw/2/

    CSS

    label{
  font-size:18px;
  vertical-align: middle;
}

input[type="radio"]{
  vertical-align: middle;
}

    HTML

    <span>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
  <label>Decimal</label>
</span>

    InformationsquelleAutor der Antwort Rahul Thakur

  3. 7

    Verwendet, um dieses 

        input[type="radio"]{
    vertical-align:top;
    }
p{
    font-size:10px;line-height: 18px;
}

    Demo

    InformationsquelleAutor der Antwort Rohit Azad

  4. 4

    HTML:

    <label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>

    CSS:

    label input[type="radio"] { vertical-align: text-bottom; }

    InformationsquelleAutor der Antwort Edward Brey

  5. 3

    Müssen Sie richten Sie den text auf der linken Seite des radio-button mit float:left

    input[type="radio"]{
float:left;
}

    Können Sie label auch für weitere ansprechende Leistung.

    InformationsquelleAutor der Antwort Sunil Kumar

  6. 3

    Diese geben wird tot auf Ausrichtung

    input[type="radio"] {
  margin-top: 1px;
  vertical-align: top;
}

    InformationsquelleAutor der Antwort Nils

  7. 2

    Können Sie versuchen, etwas, wie;

    <p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

    und geben Sie die Spannweite ein margin-top wie;

    span{
    margin-top: 4px;
    position:absolute;
}

    hier ist die Geige http://jsfiddle.net/UnA6j/11/

    InformationsquelleAutor der Antwort blasteralfred Ψ

  8. 2

    einfache und kurze Lösung hinzufügen unten Stil:

    style="vertical-align: text-bottom;"

    InformationsquelleAutor der Antwort Vasant

Schreibe einen Kommentar