如何集中使用绝对定位的 div 制作的完整网站？

Posted 2023-03-05

【中文标题】如何集中使用绝对定位的 div 制作的完整网站？

【英文标题】：How to centralise a complete website made with absolute positioned divs?

【发布时间】：2012-10-26 01:23:21

【问题描述】：

我通过在absolute 位置上绘制divs 在dreamweaver 上创建了一个站点，但它看起来只集中在1280px 宽显示器上，似乎无法让父#wrap div 成为主机所有绝对位置divs.

这是我制作的代码，

<style type="text/css">
#wrap_main 
 position: absolute;
top: 0px;
z-index: 2;
width:1400px;
margin-left:-200px;
left:50%;
text-aling:left;


body 
background-color: #000000;

#Layer1 
position:relative;
left:34px;
top:32px;
width:156px;
height:102px;
z-index:1;

#Layer2 
position:relative;
left:37px;
top:136px;
width:104px;
height:32px;
z-index:2;

#Layer3 
position:relative;
left:140px;
top:136px;
width:104px;
height:33px;
z-index:3;

这是显示我的父 div 和我希望包装的子 div id 的 html 内容。

<div id="wrap_main">
<div id="Layer25"></div>
<div id="Layer37">`<img src="../Beer_n_tts_website/Images/blue_wood.jpg"        longdesc="Blue wood background for beer n tts" /></div>
<div id="Layer38"><a href="../Beer_n_tts_website/index.html"><img  src="../Beer_n_tts_website/Images/beerntts_logo.png"     border="0" longdesc="beer and tts logo no background" /></a></div>'

在这里寻找居中divs 之后，我似乎找不到适用于我所做的所有divs 的答案，只是为了有一个#wrap 或一个类。

【参考方案1】：

已找到解决方案here。代码如下

#wrap_main 
  position: relative;
  margin: auto;
  width: 1200px;

<div id="wrap_main">

  other divs

</div>

我将宽度调整为最常见的屏幕分辨率 1280 像素，只是给它一个相对位置，这样子 div 就可以继续拥有一个绝对位置，而且它似乎工作得很好当像我这样的你时，这很有帮助很懒，宁愿画一堆 div 让它们在网站上看起来不错，然后将它们放在各种分辨率屏幕的中心。

【参考方案2】：

详细信息：如果你只是想让它居中，下面会起作用

css

#wrap_main  text-align: center 

html

<div id="wrap_main" >
    Other Div's
</div>

【讨论】：

谢谢@MVCkarl - 它没有工作我怎么找到解决方案，这里learncss.tutsplus.com/lesson/relative-and-absolute-positioning 代码如下#wrap_main position:relative;边距：自动；宽度：1200px；我将宽度调整为最常见的屏幕分辨率 1280 像素，并给它一个相对位置，这样子 div 就可以继续拥有一个绝对位置，而且它似乎工作得很好当你像我一样懒惰时，这很有帮助而是绘制一堆 div 让它们在网站上看起来不错，然后将它们放在各种分辨率屏幕的中心