Question

我试图将一条通知消息集中在一个div中，我试了top:50%但是它没有用。我试着加入一些填充物，我不喜欢那种方法。你可以看到这里的小提琴：http://jsfiddle.net/VPdmT/

.message > .inner { 
    padding:22px 0 0 40px; 
    top:50%;
    margin:0 0 22px;
    background-repeat:no-repeat;
    background-position:0 17px;
}

Answer 1

顶级CSS规则只能应用于其位置不是静态的元素。因为你没有声明绝对或相对，所以忽略top。

编辑：关于真正的答案，请执行以下操作：

.message { display: table; width: 100%; }
.message>.inner { display: table-cell; vertical-align: middle; }

Answer 2

.message > .inner {
    padding: 0;
    background-repeat: no-repeat;
    background-position:0 17px;
    display: table-cell;
   vertical-align: middle;
}
.message.success {
    color:#0e6200;
    background-color:#d8ffcc;
    border-color:#b3f39f !important;
    display: table;
}

重要的一点是，展示table-cell的div必须位于显示table的div内。

Answer 3

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ 此链接显示如何居中图像。它可能适合你一些调整。

Answer 4

.message > .inner { 
    padding:22px 0 0 40px; 
    vertical-align:middle;
    display:table-cell;
    margin:0 0 22px;
    background-repeat:no-repeat;
    background-position:0 17px;
}

将元素居中于div中

4 个答案: