需要幫助的CSS頭浮

當我做我的網頁設計，滿足一個問題，當我需要做的需要幫助的CSS頭浮

[LEFT LOGO]→[TITLE（中心）]→[RIGHT LOGO]

問題出現在RIGHT LOGO處，它不與LEFT LOGO對齊。正確的標誌是標題行（中心）

這裏是我的代碼示例下，得益於：

<div class="navigation"> 
<div id="left"> 
    <a title="Multimedia" href="#"> 
     <img src="images/logo.png"/> 
    </a> 
</div> 
<div id="title">Tutor Program</div> 
<div id="right"> 
    <a href="#" title="Inspire and Innovate"> 
     <img src="images/tagline_alt.png"/> 
    </a> 
</div>

CSS：

.navigation{ 
    height:auto; 
    background-color:#666; 
    width:85%; 
    margin:auto; 
    min-width:800px; 
} 
#title{ 
    text-align:center; 
    margin: auto; 
    font-family:‘Arial Black’, Gadget, sans-serif; 
    font-size: 20px; 
    color: #FFF; 
} 
#left { 
    float: left;text-align:left; 
    margin: auto; 
} 
#right { 
    float: right;text-align:right; 
    margin: auto; 
} 
a img { border: 0; }

來源

2013-08-18 Lim Jing

標題之前把正確的標誌。 – Itay

@Itay非常感謝，這是工作 –

只需移動左容器檢查右上方容器下方

<div class="navigation"> 
    <div id="right"> 
    <a href="#" title="Inspire and Innovate"> 
     <img src="images/tagline_alt.png"/> 
     </a> 
    </div> 
    <div id="left"> 
    <a title="Multimedia" href="#"> 
     <img src="images/logo.png"/> 
    </a> 
    </div> 
    <div id="title">Tutor Program</div> 
</div>

來源

2013-08-18 14:36:22

我的事情工作的另一種方式我有一些樣式寬度取決於徽標寬度的變化。如果它沒有設置在中心，則改變寬度％。

#title{ 
text-align:center; 
margin: auto; 
font-family:'Arial Black', Gadget, sans-serif; 
font-size: 20px; 
color: #FFF; 
width:59%; 
float:left;

}

.clear { 
clear:both; 
margin:0px; 
font-size:0px; 
}

和帶班清最後一個div後添加一個div。

<div id="right"> .... </div> 
<div class="clear"> </div>

來源

2013-08-18 10:38:18

你也可以顯示你的div作爲table和table-cells，像這樣：

HTML

<div class="navigation"> 
    <div id="left"> 
     left 
    </div> 
    <div id="title"> 
     title 
    </div> 
    <div id="right"> 
     right 
    </div> 
</div>

CSS

.navigation { 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 
.navigation > div { 
    display: table-cell; 
} 
.navigation div:nth-child(1) { 
    background: lightgray; 
} 
.navigation div:nth-child(2) { 
    background: gray; 
    text-align: center; 
} 
.navigation div:nth-child(3) { 
    background: lightgray; 
    text-align: right; 
}

還要檢查the JSFiddle Demo

來源

2013-08-18 11:10:31 LinkinTED

需要幫助的CSS頭浮

回答

相關問題