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
Post a Comment