ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: greenhead ที่ 10 สิงหาคม 2013, 10:23:37


หัวข้อ: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: greenhead ที่ 10 สิงหาคม 2013, 10:23:37
เขียน css ให้ object ลอยกลางจอยังไงครับ?
ให้ลอยตรงกลาง เหนือ object อื่นๆ โดยมีระยะห่างจากขอบจอซ้าย-ขวา-บน-ล่างเท่าๆกัน

ขอบคุณครับ  :wanwan017:

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

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: greenhead ที่ 10 สิงหาคม 2013, 10:55:58
อ้างจาก: Moiz- ที่ 10 สิงหาคม 2013, 10:28:12
ลอยกลางจอเหนือวัตถุให้ศึกษาเรื่อง Style="Position:absolute;z-index:xx} นะครับ แบ่งวัตถุที่จะอยู่ข้างล่างหรือข้างบน ยิ่ง z-index เยอะจะอยู่ข้างบนครับ กลางจอใช้ div กำหนดข้างนอกใช้ margin กำหนดข้างในใช้ padding ครับ ลองศึกษาดูนะครับผม

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

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: kiraoji ที่ 10 สิงหาคม 2013, 11:01:30

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 ครับ




                      

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: goodwide ที่ 10 สิงหาคม 2013, 11:12:15
 :wanwan017:
ต้องลองอืมทำกับ บอกเกอร์ได้ไหมอ่ะ

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: MapTwoZa ที่ 10 สิงหาคม 2013, 13:17:02
แบบไม่ต้องใช้ 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;
}


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

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: iamfenr ที่ 10 สิงหาคม 2013, 13:21:56
ปกติแค่ margin:auto; มันก็อยู่ตรงกลางแล้วนะคับ

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: MapTwoZa ที่ 10 สิงหาคม 2013, 13:27:22
อ้างจาก: iamfenr ที่ 10 สิงหาคม 2013, 13:21:56
ปกติแค่ margin:auto; มันก็อยู่ตรงกลางแล้วนะคับ

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

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: seonew ที่ 10 สิงหาคม 2013, 13:48:05
อ้างจาก: MapTwoZa ที่ 10 สิงหาคม 2013, 13:27:22
ใช่ครับ ในแนวนอนนะ แต่แนวตั้งไม่ได้ ;)


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

ได้ไหม  :P

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: MapTwoZa ที่ 10 สิงหาคม 2013, 14:06:50
อ้างจาก: seonew ที่ 10 สิงหาคม 2013, 13:48:05
อ้างจาก: MapTwoZa ที่ 10 สิงหาคม 2013, 13:27:22
ใช่ครับ ในแนวนอนนะ แต่แนวตั้งไม่ได้ ;)


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

ได้ไหม  :P

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

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

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: iCeEffecT ที่ 10 สิงหาคม 2013, 23:04:28
อีกวิธีครับ ใช้ line-heignt เข้าช่วย
ตัวอย่างครับ
http://jsfiddle.net/b4Cnn/
edit ลืมดูครับ หมายถึงใช้กล่องให้อยุ่ตรงกลางก็ตาม rep บนเลยครับ

หัวข้อ: Re: เขียน css ให้ object ลอยกลางจอยังไงครับ?
เริ่มหัวข้อโดย: max30012540 ที่ 10 สิงหาคม 2013, 23:17:00
โค๊ด:
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>


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com