如何在div中垂直居中放置元素？

Question

I'm practising making a form and I would like to position the form elements on the left in the centre of their row sort of how it would automatically be done with a table. Here is some jsFiddle for what i've been attempting so far.

How do I vertically centre the label element for a form?

Answer 1

Give label same height as input filed have & give line-height to your label . Like this:

.element label {
    float: left;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    width: 156px;
}

Answer 2

You could use jQuery and setup the position after the elements are loaded. Minor adjustments to HTML (assign IDs):

            <div class="element">
                <label id="feedback">Feedback: </label>

                <select multiple="multiple" name="feedback" size="4"  id="selectbox">
                    <option value="">Option1</option>
                    <option value="">Option1</option>
                    <option value="">Option2</option>
                    <option value="">Option3</option>
                    <option value="">Option4</option>
                    <option value="">Option5</option>
                </select>
            </div>  

Javascript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
    var ht = $("#selectbox").height();
    var ht2 = $("#feedback").height();
    ht = $("#selectbox").offset().top + (ht-ht2) / 2;
    $("#feedback").offset({ top: ht });
});
</script>

Answer 3

Strictly CSS (ID assignment on the label)

        <div class="element">
            <label id="feedback">Feedback: </label>

            <select multiple="multiple" name="feedback" size="4">
                <option value="">Option1</option>
                <option value="">Option1</option>
                <option value="">Option2</option>
                <option value="">Option3</option>
                <option value="">Option4</option>
                <option value="">Option5</option>
            </select>
        </div>

And the CSS:

.element select {
    height: 200px;
}

.element label#feedback {
    margin-top: 85px;
}