中間列表項中的位置div

Question

我在右側浮動的列表項中有一個div。 div將它自己定位在列表項的右上角。是否有可能在不使用填充或邊距的情況下將其置於中間右側？

--------------- 
      DIV 


--------------- 

需要是：

--------------- 

      DIV 

--------------- 

Answer 1

我做了一堆假設，沒有打擾檢查這第一。

li { 
    height:  32px; 
} 

li div { 
    width:  100%; 
    line-height: 32px; 
    text-align: center; 
} 

Answer 2

如果你想div來佔滿整個空間，你可以這樣定位的div：

li div { 
    float: right; 
    height: 100%; 
} 

，或者如果你不希望它會佔據整個空間

li div { 
    position: absolute; 
    right: 0px; 
    top: 50%; 
    height:80%; 
    margin-top:-40%; // Half of height 
} 

如果你有一個硬編碼列表高度和DIV高度：

li { height: 50px; } 
li div { 
    position: absolute; 
    right: 0px; 
    height:30px; 
    top: 10px; 
} 

有很多方法可以做到這一點，您應該提供更多信息，說明您希望它的行爲和外觀如何。

Answer 3

您可以使用表格單元格方法。

<div class="wrap one"> 
    <div class="inner-wrap"> 
     <div class="inner">Test</div> 
    </div> 
</div> 

隨着CSS定義父爲表，然後用垂直對齊表格的單元格：

.wrap .inner { 
    background: white; 
    float: right; 
} 

.wrap.one { 
    display: table; 
    width: 100%; 
} 
.wrap.one .inner-wrap { 
    display: table-cell; 
    vertical-align: middle; 
} 

演示：http://jsfiddle.net/vFqSC/

Answer 4

是的，你可以，但保證金或填充的是首選方法，但您可以使用相對定位並沿垂直軸評估數量。小提琴：http://jsfiddle.net/De4CV/1/

div { 
    width:200px; 
    height:200px; 
    background:#333; 
} 
div p { 
    font:1em normal Futura, sans-serif; 
    color:#f5f5f5; 
    text-align:right; 
    position:relative; 
    top:90px; 
} 

<div class="div"> 
    <p>Hello there!</p> 
</div>