0

情報を含むブロックが左に浮かんでいて、ボタン グループが右に浮いています。

情報ブロックには 2 つの行があります。最初の行は上部に情報を保持しますが、2 行目は使用可能な空白を使用して垂直方向の中央に配置する必要があります (空白はフローティング右ボタン グループによって作成されます)。

これはどのように行うことができますか？

HTML:

<div class="rowWrapper">
    <div class="moduleInfo">
        <div class="moduleTitle">Module1</div>
        <div class="moduleTime">08-05-2013 11:12:33</div>
    </div>
    <div class="actions">
        <button type="submit">Action1</button>
        <button type="submit">Action2</button>
        <button type="submit">Action3</button>
        <button type="submit">Action4</button>
        <button type="submit">Action5</button>
    </div>
</div>

CSS:

.rowWrapper {
    border: 1px solid #a29791;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 4px 0;
    padding: 4px;
    overflow: hidden;
}
.moduleInfo {
    float: left;
}
.actions {
    float: right;
}
.actions button {
    display: block;
}

このために作成されたフィドルがあります：

http://jsfiddle.net/DrDelete/bLw79/

4

4 に答える 4

0

利用可能なサイズが常に同じである場合は、次を使用できますline-height: http://jsfiddle.net/bLw79/2/

于 2013-08-05T07:41:54.663 に答える
0

中央垂直にしようとするとうまくいきません.2つのオプションを試すことができます

1) line-height:40px;

2)position:absolute; top:50%; height:240px; margin-top:-120px; //margin-top = 1/2 height

私は最初のオプションを使用したいと思います

于 2013-08-05T08:17:04.440 に答える
0

CSS に以下を追加します。

.moduleTime{
   padding-top: 35%; 
}

ただし、コード内のテキストを変更してから、このFiddleで提供されているコード内のテキストを変更することでわかるように、テキストの柔軟性が向上tableするため、ここで使用することをお勧めします。moduleTitlemoduleTitle

于 2013-08-05T07:58:43.940 に答える
0

垂直方向のセンタリングは少しトリッキーです。テキストが 1 行しかない場合は、いつでも行の高さを使用できます。ただし、複数行のテキストまたは画像がある場合、この手法は機能しません。代わりに、親の表示プロパティをテーブル (display:table) に変更します。そして、子要素に垂直方向中央揃え (vertical-align:center) を与えます。これで、子要素が親内で垂直方向に整列されます。親の高さを指定することを忘れないでください。

于 2013-08-05T09:17:41.517 に答える