เขียน css ให้ object ลอยกลางจอยังไงครับ?

[greenhead]

เขียน css ให้ object ลอยกลางจอยังไงครับ?
ให้ลอยตรงกลาง เหนือ object อื่นๆ โดยมีระยะห่างจากขอบจอซ้าย-ขวา-บน-ล่างเท่าๆกัน

ขอบคุณครับ 

[Moiz-]

ลอยกลางจอเหนือวัตถุให้ศึกษาเรื่อง Style="Position:absolute;z-index:xx} นะครับ แบ่งวัตถุที่จะอยู่ข้างล่างหรือข้างบน ยิ่ง z-index เยอะจะอยู่ข้างบนครับ กลางจอใช้ div กำหนดข้างนอกใช้ margin กำหนดข้างในใช้ padding ครับ ลองศึกษาดูนะครับผม

[greenhead]

ลอยกลางจอเหนือวัตถุให้ศึกษาเรื่อง Style="Position:absolute;z-index:xx} นะครับ แบ่งวัตถุที่จะอยู่ข้างล่างหรือข้างบน ยิ่ง z-index เยอะจะอยู่ข้างบนครับ กลางจอใช้ div กำหนดข้างนอกใช้ margin กำหนดข้างในใช้ padding ครับ ลองศึกษาดูนะครับผม

ขอบคุณครับ
คือถ้าไม่ต้อง position:absolute แล้วต้องมานับ margin-top margin-left จากจุดวาง object
..พอจะมีวิธีให้มันวัด center จากขอบจอบนล่างซ้ายขวามั๊ยครับ .. งงคำถามตัวเอง 
คือผมจะไปใส่กับ jQuery น่ะครับ 

[kiraoji]

div.ex { width:1000px;
      height:auto;
      display:block;
      margin:0;
      padding:0;
      position:fixed;
      top:30%;
      left:0;
      
      
      }
div.ex  .inner      { width:300px;
                       height:300px;
                       display:block;
                       padding:0;
                       margin:0 auto;
                       }

----------------


<div class="ex">
    <div class="inner">
       text description
   </div>
</div>            


ลองดูครับกล่องขนาด 300 ครับ




                      

[goodwide]

 
ต้องลองอืมทำกับ บอกเกอร์ได้ไหมอ่ะ

[MapTwoZa]

แบบไม่ต้องใช้ javascript ช่วย จำเป็นต้อง div 3 อันซ้อนครับ

#html

โค้ด เลือก ขยาย


<div class="outer">
 <div class="middle">
   <div class="inner"> ... </div>
 </div>
</div>


#css

โค้ด เลือก ขยาย


.outer{
 display: table;
 height: 100%;width: 100%;
 position: fixed; /* หรือจะใช้ absolute ถ้าต้องการให้มันไม่เลื่อนตามหน้าจอ*/
 overflow: hidden;
 z-index: 100; /* ถ้ายังไม่อยู่บนสุดก็เพิ่มค่านี้ */
}
.middle {
 display: table-cell;
 vertical-align: middle;
}
.inner {
 margin:0 auto;
}



ประมาณนี้ครับ ถ้ายังไม่ได้ก็ลองปรับนิดๆหน่อยๆเอา ผมไม่ได้เทส

[iamfenr]

ปกติแค่ margin:auto; มันก็อยู่ตรงกลางแล้วนะคับ

[MapTwoZa]

ปกติแค่ margin:auto; มันก็อยู่ตรงกลางแล้วนะคับ

ใช่ครับ ในแนวนอนนะ แต่แนวตั้งไม่ได้

[seonew]

ใช่ครับ ในแนวนอนนะ แต่แนวตั้งไม่ได้

margin:0 auto;
position: relative;
top: 50%;

ได้ไหม 

[MapTwoZa]

ใช่ครับ ในแนวนอนนะ แต่แนวตั้งไม่ได้

margin:0 auto;
position: relative;
top: 50%;

ได้ไหม 

top: 50%; มันไม่ได้กลางจอจริงๆครับ

ใช้แบบที่ผมบอกไปเม๊นก่อนหน้านั้น div ซ้อนกัน 3 อัน ก็ไม่ต้องสนใจอะไรแล้วครับ เล่นกับ div.inner ได้เต็มที่ เด๋วมันกลางให้เองครับ

[iCeEffecT]

อีกวิธีครับ ใช้ line-heignt เข้าช่วย
ตัวอย่างครับ
http://jsfiddle.net/b4Cnn/
edit ลืมดูครับ หมายถึงใช้กล่องให้อยุ่ตรงกลางก็ตาม rep บนเลยครับ

[max30012540]

โค้ด เลือก ขยาย


width:100px;
height:120px;
position:fixed;
left:50%;
top:50%;
margin:-60px 0 0 -50px;

เอา top กับ left มาจัดครับ แล้วใช้ margin มาจัดให้ตรงกลางจออีกครั้งหนึ่งครับ
margin:-ครึ่งหนุึ่งของความสูง หรือ height 0 0 -ครึ่งหนึ่งของความกว้าง หรือ width

ต้องขอบคุณท่านผู้หญิงคนหนึ่งในบอร์ดนี้ละครับ ที่เป็นคนบอกเล่าวิธีนี้ แล้วผมก็จำมาใช้

ตัวอย่างเพิ่มเติม

โค้ด เลือก ขยาย


<style>
.h{
width:500px;
height:420px;
position:fixed;
left:50%;
top:50%;
margin:-210px 0 0 -250px;
background:#CCC;
}
</style>
<div class="h"></div>