使用div制作页面中心

说logo1和logo2每个100px长，我想覆盖一半的标志。什么是制作两个标志的最好方式和最简单的方式，并将它们放在页面的中心。使用div制作页面中心

2012-03-30 user1056534

把你的标识放在<div>中，并给它margin: 0 auto;。

然后给logo2z-index: 1;，使它在logo1之上分层。

页：

<div class="center"> 
    <img src="Link/To/Your/Image/For/Logo1" id="logo1" /> 
    <img src="Link/To/Your/Image/For/Logo2" id="logo2" /> 
</div>

CSS：

.center { 
    width: 210px;  
    margin: 0 auto; 
    position: relative; 
    left: 10px; 
} 

#logo2 { 
    z-index: 1; 
    position: relative; 
    left: -10px;  
}

如果使标志重叠甚至更多（例如移动logo2 50像素与left: -50px;重叠，那么你也必须改变周围的位置div匹配与left: 50px;重叠，所以左侧定位为#logo2和.center应该是相同的，但是相反。

来源

2012-03-30 13:25:55 FrogInABox

如果我的标志不同大小UR 100x80箱子是什么？ – user1056534 2012-03-30 13:56:20

图片的高度无关紧要，尽管您声明宽度均为100px，但如果宽度不同，则只需将css中的'width：210px;'更改为图片的总宽度+ 10。 logo1 = 200px，logo2 = 130px，那么CSS应该是'width：340px;' – FrogInABox 2012-03-30 14:01:14

下面是一个宽度和高度不同的例子：http://jsfiddle.net/Jhx5r/40/ – FrogInABox 2012-03-30 14:04:56

一种选择是使用样式position:absolute;。以下是一个例子。

<style> 
    .container{ 
     border:solid 1px red; 
     text-align:center; 
     height:500px; 
    } 
    #logo1, #logo2{ 
     width:100px; 
     height:100px; 
     display:inline; 
     position:absolute; 
     top:200px; 
    } 
    #logo1{ 
     border:solid 1px green; 
     left:450px; 
    } 
    #logo2{ 
     border:solid 1px blue; 
     left:540px;/*note 540 = 450 + (100 - 10)*/ 
    } 

</style>

页：

<div class="container"> 
    <div id="logo1"></div> 
    <div id="logo2"></div> 
</div>

来源

2012-03-30 13:32:36 prageeth

did not似乎工作，logo2是徽标1下面，不在同一行 – user1056534 2012-03-30 13:47:05

对不起，但我现在再次与IE浏览器，铬和FF检查。这个对我有用。这两个小Div都在同一行上并且重叠10px。 – prageeth 2012-03-30 14:14:01

使用div制作页面中心

回答

相关问题