作者 主題: css 絕對位址的問題  (閱讀 2918 次)

0 會員 與 1 訪客 正在閱讀本文。

ryan

  • 可愛的小學生
  • *
  • 文章數: 19
    • 檢視個人資料
css 絕對位址的問題
« 於: 2013-09-01 22:53 »
大家好

想請問一下如果內容所以元件都有設css 的absolute,有設top和left

因為我現在的頁面是全部都靠左   而我想把版面置中該怎麼做呢

我是用以下的做法可是沒用:

<body>
<div style="margin:0px auto">
    <div class="absolute1">有測絕對位址</div>
    <div class="absolute2">有測絕對位址</div>
    <div class="absolute3">有測絕對位址</div>
                                     .
                                     .
                                     .
</div>
</body>

因為body 內的所有的元件很多,不可能一個一個改絕對位址  我在所有元件最外面包了一個div 是設置中不過沒用
請問有什麼做法讓頁面置中呢

謝謝

hikohan

  • 俺是博士!
  • *****
  • 文章數: 1288
    • 檢視個人資料
Re: css 絕對位址的問題
« 回覆 #1 於: 2013-09-02 09:02 »
代碼: [選擇]
<center><div></div></center>
有時候基本的html tag最簡單。
lifeIsFunWithPHP.

ryan

  • 可愛的小學生
  • *
  • 文章數: 19
    • 檢視個人資料
Re: css 絕對位址的問題
« 回覆 #2 於: 2013-09-02 09:45 »
hikohan大大

我剛試了一下,不過好像不會置中

hikohan

  • 俺是博士!
  • *****
  • 文章數: 1288
    • 檢視個人資料
Re: css 絕對位址的問題
« 回覆 #3 於: 2013-09-02 09:52 »
上下中還是左右中?

左右中算位置配center

上下中用table -> td -> align -> middle

大div包小div還有不中?

沒 code 沒真相,交出來吧!!
lifeIsFunWithPHP.

ryan

  • 可愛的小學生
  • *
  • 文章數: 19
    • 檢視個人資料
Re: css 絕對位址的問題
« 回覆 #4 於: 2013-09-02 10:24 »
頁面弄得還蠻亂的  我把一部份貼上來  class名稱的"uX"就都是有設absolute 我是要左右中   不知道這樣有沒有幫助...

<BODY>
<center>

<DIV id=u0_container class="u0_container">
    <DIV id="u0_img" class="u0_original"></DIV>
    <DIV id=u1 class="u1" >
    <DIV id=u1_rtf>&nbsp;</DIV></DIV>
</DIV>

<DIV id=u2_container class="u2_container">
<DIV id="u2_img" class="u2_original"></DIV>
    <DIV id=u3 class="u3" >
        <DIV id=u3_rtf>
            <p style="text-align:center;">
                <span style="font-family:微軟正黑體;font-size:16px;font-weight:normal;font-style:normal;text-decoration:none;color:#FFFFFF;">檢視成績</span>
            </p>
        </DIV>
    </DIV>
</DIV>

<DIV id=u4 class="u4" >
<DIV id=u4_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#999999;">學&nbsp; &nbsp; &nbsp; &nbsp; 年</span></p></DIV></DIV>
<DIV id=u5 class="u5" >
<DIV id=u5_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#999999;">學&nbsp; &nbsp; &nbsp; &nbsp; 期</span></p></DIV></DIV>
<DIV id=u6 class="u6" >
<DIV id=u6_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#999999;">科&nbsp; &nbsp; &nbsp; &nbsp; 目</span></p></DIV></DIV>
<DIV id=u7 class="u7" >
<DIV id=u7_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#999999;">冊&nbsp; &nbsp; &nbsp; &nbsp; 次</span></p></DIV></DIV>
<DIV id=u8 class="u8" >
<DIV id=u8_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#999999;">日&nbsp; &nbsp; &nbsp; &nbsp; 期</span></p></DIV></DIV>
<INPUT id=u9 type=submit class="u9" value="回上一頁"  >

<DIV id=u10 class="u10" >
<DIV id=u10_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#999999;">主&nbsp; &nbsp; &nbsp; &nbsp; 題</span></p></DIV></DIV>
<DIV id=u11 class="u11" >
<DIV id=u11_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#999999;">試卷標題</span></p></DIV></DIV>
<DIV id=u12 class="u12" >
<DIV id=u12_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">相似形與比例線段</span></p></DIV></DIV>
<DIV id=u13 class="u13" >
<DIV id=u13_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">101</span></p></DIV></DIV>
<DIV id=u14 class="u14" >
<DIV id=u14_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">數學</span></p></DIV></DIV>
<DIV id=u15 class="u15" >
<DIV id=u15_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">1-1 相似形與比例線段</span></p></DIV></DIV>
<DIV id=u16 class="u16" >
<DIV id=u16_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">上學期</span></p></DIV></DIV>
<DIV id=u17 class="u17" >
<DIV id=u17_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">第五冊</span></p></DIV></DIV>
<DIV id=u18 class="u18" >
<DIV id=u18_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">2012.05.20</span></p></DIV></DIV>
<DIV id=u19 class="u19" >
<DIV id=u19_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#999999;">班&nbsp; &nbsp; &nbsp; &nbsp; 級</span></p></DIV></DIV>
<DIV id=u20 class="u20" >
<DIV id=u20_rtf><p style="text-align:left;"><span style="font-family:微軟正黑體;font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">5年2班</span></p></DIV></DIV>


</center>
</body>

ryan

  • 可愛的小學生
  • *
  • 文章數: 19
    • 檢視個人資料
Re: css 絕對位址的問題
« 回覆 #5 於: 2013-09-02 11:02 »
hikohan大大  我解決了  感謝你熱心的回覆

解決方法是我參考以下的網址

http://www.jaceju.net/blog/archives/9/

謝謝

Acoju

  • 懷疑的國中生
  • **
  • 文章數: 50
    • 檢視個人資料
Re: css 絕對位址的問題
« 回覆 #6 於: 2013-09-18 23:07 »
#out1{
    width:100%;
       background: #E2FFF2;
}
#out2{
    width:1000px;  <----指定預備設計的網頁寬度
    border:1px solid #BDA3A8;
       background: #FFFFFF;
}

<body>
<div align="center" id="out1">
<div align="center" id="out2">
xxxx任何內容 xxxx
</div>
</div>
</body>

我都是這樣,先設2層div讓網頁置中的,firefox有效,不管有多寬,頁面一定置中,ie就不知到了。