Question

在my project here中，我无法垂直居中对齐顶部栏上浮动的撤消/重做元素。

我尝试vertical-align: middle也使用line-height，但我没有达到预期的效果。

我错过了什么？

jsFiddle

Answer 1

一种解决方案是使用display: table和display: table-cell代替浮点数，然后使用vertical-align: middle;

Have a fiddle!

#bar有display: table
h4和#actions被视为“表格单元格”

HTML

<div id="bar">
    <h4>Tasks</h4>
    <span id="actions">
        <input type="image" id="undo" src="http://i.imgur.com/fyCSlvW.png" disabled />
        <input type="image" id="redo" src="http://i.imgur.com/BshzaCg.png" disabled />
    </span>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family:"Arial";
    font-size: 62.5%;
}
#actions button {
    background: none;
    border: 0rem;
}
#actions button input {
    outline: none;
}
#bar {
    background-color: #4196C2;
    display: table;
    width: 100%;
}
h4 {
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;
    margin-top: 2rem;
    /* = 20px */
    color: white;
    padding: 20px;
    font-size: 1.8rem;
}
#actions {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

Answer 2

您尚未设置包含两个按钮的范围。添加以下内容：

#actions {
    display: block;
    margin: 0 0 0 0;
    padding: 15px 0 0 0
}

在这里：http://jsfiddle.net/csTS7/151/

Answer 3

在div中添加margin-top并以百分比形式执行，例如

#bar
{
margin-top: 5%;
}

Answer 4

这是JsFiddle

h4{
    text-decoration: none;
    display: inline-block;
  /*  margin-top: 2rem;         = 20px */
    color: white;
    margin-left: 1.5rem;
    font-size: 1.8rem;
    line-height: 15px;

}

我已经为元素栏指定了最小高度，并删除了h4的上边距并添加了行高

无法垂直居中对齐浮动元素

4 个答案: