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上的居中图像

回答

相关问题