HTML/CSS 对齐(内联、水平)和保持右对齐

Question

我试图让这些图标在页眉中并排放置，并在中间(垂直)对齐，并保持在页面的右侧(也许是 float 的？)

http://jsfiddle.net/qNWeV/1/

这是我想要完成的图像:

<!-- HEADER -->
    <div class="header">
        <img class="center-header" src="images/center_header.png" />

        <!-- BUTTONS (header) -->
        <div class="header-buttons-right">
            <!-- Notification Icon -->
            <div class="notify-div" class="right-margin"> <span id="notify-span"> 1 </span> </div>
            <div class="gear-settings"> <!-- Gear Settings --> </div>
            <div class="menu-button"> <!-- Menu Button --> </div>
        </div>

    </div>


/* ******************* */
/*        TOP-NAV      */
/* ******************* */
.header {
    background-color:rgb(243,243,243);
    width:100%;
    height:60px;
    border-color:rgb(243,243,243);
    border-width:2px;
    /* Firefox v1.0+ */
    -moz-border-radius:0%;
    /* Safari v3.0+ and by Chrome v0.2+ */
    -webkit-border-radius:0%/3%;
    /* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
    border-radius:0%/3%;
    border-style:solid;
}
.center-header {
    position: fixed;
    z-index: 1002;
    left: 50%;
    top: -45px;
    margin-left: -135px;
}
.header-buttons-right {
    float: right;
}
.notify-div {
    width: 24px;
    height: 24px;
    background: url('../images/notify-round.png') no-repeat center;
    text-align: center;
}
    #notify-span {
        position: relative;
        top: 3px;
        font-family:"Futura LT Bold";
        font-size:12px;
        font-weight:bold;
        line-height:117%;
        color:rgb(255,255,255);
    }
.gear-settings {
    background: url('../images/gear-settings.png') no-repeat center;
    width: 24px;
    height: 24px;
    display: inline-block;
}
.menu-button {
    background: url('../images/menu.png') no-repeat center;
    width: 24px;
    height: 21px;
}

Answer 1

HTML:

<!-- HEADER -->
<div class="header"> 
    <img class="center-header" src="images/center_header.png" /> 
                <!-- BUTTONS (header) -->
    <div class="header-buttons-right"> 
        <!-- Notification Icon -->
        <span class="notify-div right-margin">
            <span id="notify-span"> 1 </span> 
        </span>
        <span class="gear-settings"> G</span>
        <span class="menu-button">M</span>
    </div>
</div>

CSS:

/* ******************* */
/*        TOP-NAV      */
/* ******************* */

.header {
    background-color: rgb(243,243,243);
    width: 100%;
    height: 60px;
    line-height: 60px;
    border:2px solid rgb(243,243,243);
/* Firefox v1.0+ */
-moz-border-radius:0%;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:0%/3%;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:0%/3%;
}
.center-header {
    position: fixed;
    z-index: 1002;
    left: 50%;
}
.header-buttons-right {
    float: right;
    width:200px;
}
.notify-div {
    width: 24px;
    height: 24px;
    background: url('../images/notify-round.png') no-repeat center;
    text-align: center;

}
#notify-span {
    font-family: "Futura LT Bold";
    font-size: 12px;
    font-weight: bold;
    color: rgb(255,255,255);
}
.gear-settings {
    background: url('../images/gear-settings.png') no-repeat center;
    width: 24px;
    height: 24px;
}
.menu-button {
    background: url('../images/menu.png') no-repeat center;
    width: 24px;
    height: 21px;
}

Jsfiddle: http://jsfiddle.net/VJGUM/