Question

我正在练习制作一个表单，我想将表单元素放在行的中心左侧，以及如何使用表格自动完成。对于我到目前为止所尝试的内容，这里有一些jsFiddle。

如何垂直居中表格的标签元素？

Answer 1

label与input filed相同的高度{＆1}将line-height提供给您的label。像这样：

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

Answer 2

您可以使用jQuery并在加载元素后设置位置。对HTML进行微调（分配ID）：

            <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

严格的CSS（标签上的ID分配）

        <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>

CSS：

.element select {
    height: 200px;
}

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

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

3 个答案: