ต่อไป »

[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>