Ist es möglich, mehrzeilige Etiketten vertikal zu zentrieren?

Question

Seit ich stundenlang recherchiere und daran arbeite, ohne Glück, nehme ich an, die Antwort ist nein, aber würde die Bestätigung auf die eine oder andere Weise lieben.

Ich habe eine mehrzeilige Bezeichnung links von einem Auswahlfeld. Angenommen, das Etikett besteht aus 3 Zeilen. Ich möchte, dass die mittlere Zeile des Labels vertikal mit dem Auswahlfeld übereinstimmt. Wie folgt aus:

Label Line 1 
Label Line 2  SelectField 
Label Line 3 

Im Grunde ist meine Frage sehr ähnlich wie diese von ein paar Jahren, die nicht endgültig beantwortet wurde: Vertical center label with text area and with select and with textbox. Jemand hat geantwortet, dass Javascript erforderlich ist.

Ich habe eine FIDDLE mit meinen Bemühungen so weit. Ich habe einige interessante Varianten gefunden, aber nichts passt zu dem, wonach ich suche.

Kann jemand bestätigen, ob das möglich ist oder nicht? Vielen Dank!!!

[EDIT: Rechtschreibung]

Answer 1

Versuchen Sie, diese

HTML

<div class= 'divclass'> 
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label> 
    <select class='selectclass'> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
    </select> 
</div> 
<div class= 'divclass'> 
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label> 
    <select class='selectclass'> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
    </select> 
</div> 
<div class= 'divclass'> 
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label> 
    <select class='selectclass'> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
    </select> 
</div> 

CSS

div.divclass { 
    border: 1px solid red; 
    height: 150px; 
    width: 400px; 
} 
label.labelleft { 
    width: 90px; 
    text-align: right; 
    background: lightblue; 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 
select.selectclass { 
    width: 100px; 
    display: inline-block; 
    margin-left: 20px; 
} 

Arbeits Fiddle

Answer 2

Verwenden Sie einfach eine Tabelle.

td { vertical-align: middle; } 
 
.narrow { width:8em; padding-right: 2em; }

<table> 
 
    <tr> 
 
    <td class="narrow"><label for="menu">Label text wrapped across multiple lines</label></td> 
 
    <td><select name="menu" id="menu"> 
 
     <option>Menu item #1</option> 
 
     <option>Menu item #2</option> 
 
     <option>Menu item #3</option> 
 
     <option>Menu item #4</option> 
 
    </select></td> 
 
    </tr> 
 
</table> 
 

Answer 3

Ja, es ist möglich, verwenden Sie flexbox .Kontrolle this aus. Schlüssel ist, folgenden Code in deiner Geige zu verwenden.

div.divclass { 
    display: flex; 
    align-items: center; 
    justify-content: start; 
    height: 150px; 
    width: 400px; 
    border: 1px solid red; 
} 

select.selectclass { 
    width: 100px; 
    display: flex; 
} 

Lesen Sie mehr über flexboxhere