CSS浮动Div＆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和数值的一半到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;">。