CSS float Div 和对齐

Question

我正在尝试创建一个控件，其中包含两个带有添加/删除按钮的列表框，用于将元素从一个列表移动到另一个列表。通常我会使用表格来执行此操作，但我尝试遵循 css 标准并使用 div。

我将列表框完美对齐，但我不知道如何在它们之间设置按钮。

这是我的 html(已更新以显示呈现的 html):

<div id="dealsummary-ladderlist">    
    <form action="/Reporting/DealSummaryComparison" method="post">    
        <div id="available">
            <div><strong>Available</strong></div>
            <div id="available-items">
                <select id="ItemsToSelect" multiple="multiple" name="ItemsToSelect" size="30">
                    <option value="16">Item 1</option>
                    <option value="17">Item 2</option>
                    <option value="21">Item 3</option>
                    <option value="22">Item 4</option>
                    <option value="23">Item 5</option>
                    <option value="24">Item 6</option>
                    <option value="25">Item 7</option>
                </select>
            </div>
        </div>
        <div id="add-remove">
            <div><input type="button" value=">>" /></div>
            <div><input type="button" value="<<" /></div>
        </div>
        <div id="selected">
            <div><strong>Selected</strong></div>
            <div id="selected-items">
                <select id="ItemsToDeselect" multiple="multiple" name="ItemsToDeselect" size="30"></select>
            </div>
        </div>
        <div style="clear:both;"></div>

        <br /><br />

        <center>
            <p>
                <input type="submit" value="Generate Report" />
            </p>
        </center>
    </form>
</div>

这是我的 css:

#add-remove {
    /* want to center on page */
    float: left;
    width: 10%;
}

#add-remove div {
   /* want to add even spacing between buttons */
}

#available {
    float: left;
    width: 45%;
}

#selected {
    float: right;
    width: 45%;
}

#available #available-items,
#selected #selected-items {
    margin: 1em 0 0 0;
}

#available #available-items select,
#selected #selected-items select {
    width: 100%;
    font-size: 10pt;
}

如何使用 css 实现箭头按钮的居中和均匀间距？

Answer 1

如果您知道 <div id="add-remove"> 的精确宽度和高度元素，你可以将整个东西包装在一个相对定位的 <div> 中并使用负边距的绝对定位，如下所示:

<div id="relativeWrapper"> <!-- added this -->
    <div id="available">
        <!-- ... snip ... -->
    </div>

    <div id="add-remove">
        <div><input type="button" value=">>" /></div>
        <div><input type="button" value="<<" /></div>
    </div>

    <div id="selected">
        <!-- ... snip ... -->
    </div>

    <div style="clear:both;"></div>
</div>
<!-- ... etc ... -->

使用 CSS:

div#relativeWrapper {
    position: relative;
}

div#add-remove {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    margin-left: -40px;
    height: 64px;
    margin-top: -32px;
}

同时设置 top和 left至 50%和 margin-left到 width 值的一半和 margin-top到 height 值的一半将水平和垂直居中绝对定位的元素在其相对父元素中。

垂直居中很难实现；你可以使用 display: inline-block; vertical-align: middle; ，但是inline-block并非所有浏览器都支持。或者，使用 display: table-cell; vertical-align: middle;倾向于工作。

顺便说一句，<center>元素已弃用。使用 <div style="text-align: center;">或者简单地 <p style="text-align: center;">相反。