css上的居中圖像

-1

我正在嘗試使用以下代碼使我的徽標中心成爲可能。css上的居中圖像

它位於標頭容器中。

<div class="header-container"> 
    <div class="header"> 
    <h2 class="logo"> 
     <a href="www.www.com" title="scorpia" class="logo"> 
      <img src="headerbg.jpg" alt="scorpia"> 
     </a> 
    </h2> 
    </div> 
</div> 

.logo {} 
.header-container {} 
.header { 
    margin:0 auto; 
    padding:0px; 
    text-align:center; 
    position:relative; 
    z-index:10; 
} 
.header .logo { 
    display:block; 
    text-decoration:none !important; 
} 
.header .logo strong { 
    position:relative; 
    top:-999em; 
    left:-999em; 
    width:0; 
    height:0; 
    font-size:0; 
    line-height:0; 
    text-indent:-999em; 
    overflow:hidden; 
} 
.header h1.logo, .header h2.logo { 
    margin:0; 
}

這是我得到..正如你可以看到它是一個小向右 enter image description here

任何人都知道我怎麼能解決這個結果呢？

來源

2013-10-24 John

哪一部分是'.header'中心？您還需要發佈標記。 – styfle

.header是白色空間..對不起..不知道我應該發佈什麼 – John

爲'.header'指定寬度，'width：1000px'會爲你做 –

嘗試類似;

.header img { 
    display:block; 
    margin:0 auto; 
    width:100%; 
}

即將居中（margin:0 auto）應用於實際圖像。

但你的代碼的的jsfiddle將有助於:)

來源

2013-10-24 01:38:27

什麼是jsfiddle？我不知道我必須提供哪些其他代碼。嗯。有什麼建議？ – John

你如何以「寬度：100％」爲中心？ –

你的代碼看起來並不完全。它坐在什麼容器/包裝中？ @John沒有看到代碼的其餘部分，我只是假定它坐在一個具有固定尺寸的包裝或容器中。 –

寫您的頁面這樣。

你也可以做一個非常方便的垂直與vertical-align:middle;

HTML

<div id="wrapper"> 
    <div id="container"> 
     <div class="header"> 
      <img class="logo" src="http://i.stack.imgur.com/0ligN.jpg" /> 
     </div> 
     <div id="inner2" style=""></div> 
    </div> 
</div>

CSS

html, body { 
    margin:0; 
    height:100%; 
} 
body { 
    display:table; 
    width:100%; 
} 
#wrapper { 
    display:table-cell; 
    /* vertical-align:middle;*/ 
    height:100%; 
    width:100%; 
} 
#container { 
    height:100%; 
    width:70%; 
    background:red; 
    margin:0 auto; 
} 
.header {  
    width:90%; 
    height:20%; 
    background:black; 
    margin:0 auto; 
} 
.logo {width:100%}

http://jsfiddle.net/TqaBM/

來源

2013-10-24 01:48:22 SzKb

感謝您的幫助！我添加了一些新的代碼，這可能會讓你們更容易理解它。 – John

css上的居中圖像

回答

相關問題