html - 中央のリスト項目内に 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 を使用して、垂直方向に配置された table-cell を使用します。

.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/