我有以下HTML来居中图层和链接:
编辑:一个更好的例子
<style> body {
background-color:#000;
color: #FFF;
} a { font-family: "Broadway",
Broadway,monospace; font-size:
14px; color:
#FFF; }
#images a {
width: 24.99%; display: block;
float: left; text-align: center; }
#container; { top: 30%; left: 15%; }
#main { position: absolute; width: 800px; height: 600px; }
#logo { float:left; background-image:url("1.jpeg");
width: 104; height: 100; }
</style> <div id="main"> <div
id="logo"> </div> <div
id="container"> <div id="images">
<a href="1.html" >
<img src="1.gif" alt="x" width="181" height="173" border="0"
/><br />
One </a> <a href="2.html" >
<img src="2.gif" alt="x" width="181" height="173" border="0"
/><br />
Two </a> <a href="3.html" >
<img src="3.gif" alt="x" width="181" height="173" border="0"
/><br />
Three </a> <a href="4.html" >
<img src="4.gif" alt="x" width="181" height="173" border="0"
/><br />
Four </a> </div></div></div>
答案 0 :(得分:0)
主div的宽度为800px,因此浮动徽标div(104px)+ 4个图像(每个25%)对于一行来说太大,因此最终图像会包裹到下面的一行。解开徽标div将在最左侧的新行上启动图像。
默认情况下,位置是静态的 - 因此左侧和顶部无效。
在容器div上设置position:relative;
- 请小心使用IE6,因为如果我没记错的话,位置:relative会有点滑稽。