中间列表项中的位置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>