HTML/CSS對齊（內聯，水平）並保持右對齊

Question

我試圖讓這些圖標在中間（垂直）對齊的標題中彼此相鄰，並保持在頁面的右側（？也許浮動）

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/

Answer 2

既然你知道了頭，我建議給容器爲你的圖標相同的高度和行高的高度。

然後，您可以浮動這個容器權利，如果圖標是內嵌塊，你可以設置自己vertical-align: middle;

這裏，我已經刪除的圖標圖像和給定的div的背景顏色，而不是爲了更好地說明結果：

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

如果你會發現我已經刪除了空間中的每個圖標的閉幕div標籤和開div標籤之間。因爲它們被設置爲內聯塊，所以瀏覽器會添加一個空格，我寧願用邊距來控制它。