2013-07-02 73 views
0

我會把網站名稱放在這個標題的中間,但不幸的是我不能這樣做,我嘗試了很多組合,但我不能。我會後的源標題css中的網站名稱?

CSS

.header { 
    background-color:#00B9ED; 
    height:50px; 
    border-bottom:0px; 
    padding-left:auto; 
    padding-right:auto; 
    width:100%; 
} 

#wrapper { 
    margin-left:auto; 
    margin-right:auto; 
    width:1000px; 
    padding-top:0px; 
    padding-bottom:0px; 
} 

.logo { 
    width:150px; 
    margin: 0 auto; 
} 

.logo img { 
    width:150px; 
    height:50px; 
} 

.logo:hover { 
    height:50px; 
    background-color:#A9E2F3; 
    cursor:pointer; 
} 

HTML

<div class="header"> 
    <div id="wrapper"> 
     <div class="logo"> 
      <img src="image.png" /> 
     </div> 
    </div> 
</div> 

不知道我該怎麼辦?由於

+1

'保證金:0 auto'您'.logo'會[做的伎倆(http://jsfiddle.net/3JHLY/) – Jeroen

+0

在任何情況下,它可以幫助你發佈一個問題,如果你的東西儘可能可讀(格式化你的代碼),並檢查它是否是有效的代碼(缺少右括號,未封閉標籤等)。這有助於我們幫助你(並使我們更好玩,幫助你)。請注意,您可以編輯您的問題以改進它(編輯屏幕也有一個很棒的實時預覽)。 – Jeroen

+0

John,在編輯這個問題之前,我認爲你在'margin-right:auto;'wrapper'到'margim-right'時做了錯誤的拼寫?不是嗎? – zey

回答

1

使用下面的代碼

<style> 
.header { 
background-color:#00B9ED; 
height:50px; 
border-bottom:0px; 
padding-left:auto; 
padding-right:auto; 
width:100%; 
} 

#wrapper { 
margin-left:auto; 
margim-right:auto; 

padding-top:0px; 
padding-bottom:0px; 
} 
.logo { 
text-align: center; 
} 
.logo img { 
    width:150px; 
    height:50px; 
} 
.logo:hover { 
height:50px; 
background-color:#A9E2F3; 
cursor:pointer; 
} 
</style> 

<div class="header"> 
<div id="wrapper"> 
<div class="logo"> 
<a>Bhavin<img src="image.png"></a> 
</div> 
</div> 
</div> 
0

試試這個

CSS

#wrapper { 
     margin: 0 auto; 
     padding-bottom: 0; 
     padding-top: 0; 
     width: 1000px; 
    } 

.logo { 
    margin: 0 auto; 
    width: 150px; 
} 

HTML

<div class="header"> 
<div id="wrapper"> 
<div class="logo"> 
<a href="#">logo<img src="image.png" alt="LOGO"/></a> 
</div> 
</div> 
</div> 
0

總是試圖用標準的代碼。您可以使用text-align,但它用於對齊段落或其他元素與文本。 Insted align我建議使用margin:0 auto;width:150px;

在這裏,你得到了jsFiddle

+0

'文本對齊'並不總是隻爲「_paragraph或其他元素與text_」。它可以用於任何元素。 http://jsfiddle.net/GrtN2/ –