CSS文本垂直对齐问题

Question

我有一些文字，我只是试图居中（垂直，所以它与按钮对齐）

<div id="right">
    <div id="right_header">
        <p>Schedule</p>
        <div id="buttons">
            <button onclick="manualAddNewAppointment()">New appointment</button>
            <button onclick="manualAddNewEvent()">New event</button>
            <button onclick="NewClient()">New client</button>
        </div>
    </div>
    <div style="word-wrap: break-word; overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px;">
    </div>
</div>

#right{
    height: 100%;
    overflow: hidden;
}
#right_header {
    padding: 2px 0;
    padding-right: 5px;
    border-bottom: 1px solid #D9D9D9;
    overflow: hidden;
    vertical-align: middle
}
#right_header p {
    float: left;
    padding-left: 15px;
    margin: 0;
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "tahoma", Verdana, sans-serif;
    font-weight: bold;

}

关于我做错了什么的想法？

Answer 1

您可以为p元素添加边距或填充。

尝试：

#right_header p {
    float: left;
    padding-left: 15px;
    margin: 0;
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "tahoma", Verdana, sans-serif;
    font-weight: bold;
    margin-top:4px;
}

DEMO

Answer 2

做类似

的事情

#right_header p {
   line-height: 40px; //adjust the 40 accoringly
}