水平居中div不能在容器div内工作
[英]Centre divs horizontally not working inside container div
问题描述
我已经为此苦苦挣扎了好几天，但一定要错过一些愚蠢的事情，希望能对您有所帮助！
基本上，我正在建立一个具有页眉，正文和页脚的网站。 标头div嵌入了Flash元素，并且工作正常。 我将所有div集中在以下位置：
Position: absolute;
Width: 2000px;
Margin-left: -1000px;
Left: 50%;
在我尝试使页脚停留在页面底部但在调整大小时不与其余内容重叠之前，此方法效果很好。 但是我要归功于StickyFooter，并将div放到容器div的外面，并将所有div的位置更改为“相对”。
但是，现在容器中的所有内容都不再希望正确居中，而我只是无法正确对中。 有任何想法吗？ 非常感谢。
这是我的HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site</title>
<link href="CSS/lum.css" rel="stylesheet" type="text/css" />
<script src="js/flexcroll.js" type="text/javascript"></script>
<script src="js/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
</head>
<body>
<div id="container" align="center">
<div id="header">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="2000" height="500" id="lum_topbar" align="middle">
<param name="movie" value="lum_topbar.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="lum_topbar.swf" width="2000" height="500">
<param name="movie" value="lum_topbar.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<iframe name="ifcontent" id="ifcontent" frameborder="0" allowtransparency="true" src="home.html"></iframe>
</div>
<div id="footer">
<div id="footer_img"><img src="images/footer.jpg" alt="footer" width="2000" height="227" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="961,32,1019,55" href="design.html" target="ifcontent" alt="design" onmouseover="MM_effectAppearFade('tick1', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick1', 300, 100, 0, false)"/>
<area shape="rect" coords="977,57,1018,76" href="web.html" alt="web" target="ifcontent" onmouseover="MM_effectAppearFade('tick2', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick2', 300, 100, 0, false)"/>
<area shape="rect" coords="810,79,1016,98" href="wedding.html" target="ifcontent" alt="wedding invites" onmouseover="MM_effectAppearFade('tick3', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick3', 300, 100, 0, false)"/>
<area shape="rect" coords="936,100,1015,121" href="contactus.html" target="ifcontent" alt="contact us" onmouseover="MM_effectAppearFade('tick4', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick4', 300, 100, 0, false)"/>
<area shape="rect" coords="932,126,1016,142" href="contactus.html" target="ifcontent" alt="quote" onmouseover="MM_effectAppearFade('tick5', 300, 0, 100, false)" onmouseout="MM_effectAppearFade('tick5', 300, 100, 0, false)"/>
</map>
<div id="div_ticks">
<table width="27" height="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="21"><img src="images/tick.png" name="tick1" width="21" height="6" id="tick1" onload="MM_showHideLayers('tick1','','hide')" /></td>
</tr>
<tr>
<td height="21"><img src="images/tick.png" name="tick2" width="21" height="6" id="tick2" onload="MM_showHideLayers('tick2','','hide')" /></td>
</tr>
<tr>
<td height="21"><img src="images/tick.png" name="tick3" width="21" height="6" id="tick3" onload="MM_showHideLayers('tick3','','hide')"/></td>
</tr>
<tr>
<td height="21"><img src="images/tick.png" name="tick4" width="21" height="6" id="tick4" onload="MM_showHideLayers('tick4','','hide')"/></td>
</tr>
<tr>
<td height="21"><img src="images/tick.png" name="tick5" width="21" height="6" id="tick5" onload="MM_showHideLayers('tick5','','hide')"/></td>
</tr>
</table>
</div>
</div>
</body>
</html>
这是我的CSS：
html, body {height: 100%;}
body {
padding: 0;
overflow-x: hidden;
background-color: #000;
background-image: url(../images/main.jpg);
background-position: center;
background-repeat: repeat-y;
height: 100%;
margin: 0;
}
#container {
position: relative;
width: 100%;
margin: 0;
min-height: 100%;
overflow: auto;
padding-bottom: 228px;
}
#header {
position: relative;
width: 2000px;
height: 456px;
margin-left: -1000px;
left: 50%;
z-index: 2;
}
#ifcontent {
position: relative;
overflow-x: hidden;
width: 1100px;
height: 610px;
margin-left: -550px;
left: 50%;
}
#footer {
position: relative;
width: 2000px;
height: 228px;
margin-left: -1000px;
left: 50%;
margin-top: -228px;
clear: both;
}
#div_ticks {
position: absolute;
width: 33px;
height: 121px;
z-index: 4;
left: 1036px;
top: 35px;
}
#footer_img {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
}
2 个解决方案
解决方案1
0 2015-03-28 14:29:02
您可以在这里摆脱大部分CSS。 您可以在不设置left：％50宽度和负边距的情况下将元素居中。 您需要做的就是设置元素的宽度，然后将左右边距设置为auto。
#header {
width:2000px;
margin-left:auto;
margin-right:auto;
}
解决方案2
0 2015-03-28 15:07:08
将标头CSS更改为
#header {
width: 2000px;
margin: auto;
}
并为您的对象添加CSS
#header object {
float: none;
display: inline;
}
为什么内联块不能将父容器div中的两个div并排水平并排？
[英]Why inline-block is not working to align two divs inside of a parent container div horizontally side by side?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.