我被一些感覺應該很簡單的東西難倒了！如何將標誌背景img和文本置於標題中？

我試圖將徽標居中在<header>的中心。該徽標由<a>組成，其背景圖像是徽標圖標，錨文本是徽標名稱。我在<h1>上使用margin: 0 auto;居中使用徽標圖標，但無法找到將圖標和文本作爲一個單元集中在一起的良好解決方案。

<header> 
    <h1> 
    <a href="#" class="logo">Logo Name</a> 
    </h1> 
</header>

CSS：

header h1 { 
    height: 54px; 
    width: 54px; 
    background: url('../img/logo.png') no-repeat left; 
    margin: 0 auto; 
} 

a.logo { 
    font-size: 33px; 
    margin: 0 auto; 
    display: block; 
    padding-top: 20px; 
}

任何想法？

來源

2012-05-03 jasonbradberry

什麼是相關的CSS？ – Ktash

嘗試添加一個jsFiddle代碼的例子。它會幫助我們幫助你。 – Cthulhu

你應該設置寬度：100px; ..然後設置margin：0 auto; –

定義它，我通常不喜歡這樣：

<style> 
    .logo{ 
     margin: 0px auto; 
     padding-left: 120px; /* the space between the start of your logo and your text */ 
     padding-top: 30px; /* the vertical space between the top and your text, to center the logo*/ 
     display: block; /* very important since normally anchors are inline */ 
     background: url(path/to/logo.png) top left no-repeat; /* obviously :) */ 
    } 
</style>

它真的不需要是一個H1內。

當您看到結果時，yo可能看不到它居中，那麼測量您的單位，並在上面的.logo規則中指定寬度和高度。

來源

2012-05-03 15:00:52 lu1s

好的，謝謝你會放棄這一切。我將錨定在h1內，因爲我希望屏幕閱讀器將錨文本作爲網站的主標題。我在那個錯誤的軌道上！？ – jasonbradberry

這並沒有錯，但是如果你把h1放在錨內，會更好。我通常也把標誌作爲一個img元素。即'

logo name

'。這更有意義。 – lu1s

-1

這可能工作。

<header style="align:center">

來源

2012-05-03 15:00:16

應該是'text-align'，並且應該避免內聯樣式。 – simshaun

沒錯..感謝您糾正我的問題 –

您可以使用css定位背景。

background-position:center;

您還可以通過像素或百分比

background-position:20px 50px; 
background-position:50% 50%;

來源

2012-05-03 15:00:18 herrmarek

你已經把背景鏈接離開它應該是中心

試試這個

background: url('../img/logo.png') no-repeat center;

來源

2012-05-03 15:34:31

如何將標誌背景img和文本置於標題中？

回答

logo name

相關問題