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

问题描述 投票:2回答:2

我通过在div位置绘制absolutes在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;
}

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

<div id="wrap_main">
<div id="Layer25"></div>
<div id="Layer37">`<img src="../Beer_n_tts_website/Images/blue_wood.jpg" alt="Blue Wood"     width="200" height="634" 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" alt="beer n tts logo" width="118"  height="82" border="0" longdesc="beer and tts logo no background" /></a></div>'

在寻找divs的中心后,我似乎无法找到一个适用于我所制作的所有divs的答案,只是为了有一个#wrap或一个类。

html position centering absolute
2个回答
0
投票

详细信息:如果您只是想让它居中,那么下面就可以了

CSS

#wrap_main { text-align: center }

HTML

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

0
投票

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

#wrap_main {
  position: relative;
  margin: auto;
  width: 1200px;
}
<div id="wrap_main">

  other divs

</div>

我将宽度调整到最常见的屏幕分辨率1280像素,并给它一个相对位置,所以孩子divs,可以继续有一个绝对的位置,它似乎工作得很好这有助于很多像我一样你是懒惰和相反,绘制一堆div使他们在网站上看起来很好,然后将它们放在各种分辨率屏幕中心。

© www.soinside.com 2019 - 2024. All rights reserved.