CSS Text Vertical alignment issue

Question

I've got some text which I'm simply trying to centre (vertically, so it aligns with the buttons)

<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;

}

Any ideas about what I'm doing wrong?

Answer 1

You can add a margin or a padding to your p element.

Try:

#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

do something like

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