CSS Floating Div's & Alignment

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;"> вместо.