0

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

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

在您的 CSS 中添加以下内容：

.moduleTime{
   padding-top: 35%; 
}

但是我建议您在table这里使用，因为它会为您的moduleTitle文本提供更大的灵活性，正如您可以通过更改代码中的moduleTitle文本然后更改此Fiddle上提供的代码中的文本来看到的那样

于 2013-08-05T07:58:43.940 回答
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

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

于 2013-08-05T09:17:41.517 回答