Question

我有一个信息块，向左浮动，一个按钮组向右浮动。

信息块有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/

Answer 1

如果可用尺寸始终相同，您可以使用line-height： http://jsfiddle.net/bLw79/2/

Answer 2

在CSS中添加以下内容：

.moduleTime{
   padding-top: 35%; 
}

但我建议您在此处使用table，因为通过更改代码中的文字然后更改moduleTitle文字，您可以看到moduleTitle文字更具灵活性此Fiddle

上提供的代码

Answer 3

如果您尝试纵向中心，它将无效，您可以尝试2个选项

1) line-height:40px;

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

我更喜欢使用第一个选项

Answer 4

垂直居中有点棘手。如果只有一行文本，则可以始终使用行高。但是，如果您有多行文本或图像，这种技术将不起作用。而是将父显示属性更改为table（display：table）。并将垂直对齐设置为子元素的中心（vertical-align：center）。就是这样，现在子元素将在父元素中垂直对齐。不要忘记给父母一个高度。

在可用高度内垂直居中

4 个答案: