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>

将div放在中间的列表项中

4 个答案: