html - Is it possible to vertically center multi-line labels? -


since i've been researching , working on hours no luck, assume answer no, love confirmation 1 way or another.

i have multi-line label left of select field. assume label 3 wrapped lines. middle line of label match vertically select field. this:

label line 1 label line 2        selectfield label line 3 

basically, question similar 1 couple of years ago, not answered definitively: vertical center label text area , select , textbox. responded javascript required.

i have fiddle efforts far. i've found interesting variations, nothing matches i'm looking for.

can confirm whether or not possible? thanks!!!

[edit: spelling]

try

html

<div class= 'divclass'>     <label class="labelleft" for='name'>name 1 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 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 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; } 

working fiddle


Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -