html - 将 div 置于列表项的中间

Question

我在一个向右浮动的列表项中有一个 div。div 将其自身定位在列表项的右上角。是否可以在不使用填充或边距的情况下将其定位在右中？

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


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

需要是：

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

            DIV

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

Answer 1

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

<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 2

我做了一堆假设，并没有先检查这个。

li {
  height:       32px;
}

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

Answer 3

是的，您可以，但边距或填充是首选方法，但您可以使用相对定位并沿垂直轴评估数量。小提琴：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>

Answer 4

如果你想让 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;
}

有很多方法可以做到这一点，您应该提供更多关于您希望它的行为和外观的信息