วิธี css จัดตำแหน่ง vertical auto

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

M027
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 758
ลงทะเบียนเมื่อ: 08/06/2015 10:07 am

วิธี css จัดตำแหน่ง vertical auto

โพสต์ที่ยังไม่ได้อ่าน โดย M027 »

Example HTML

โค้ด: เลือกทั้งหมด

<div class="parent">
      <div class="children">I'm vertically centered!</div>
</div>
Example CSS

โค้ด: เลือกทั้งหมด

.children{
	background: #ffdb4c;
	height: 300px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
จากโค้ดทั้ง 2 จะทำให้ div.children จัดอยู่กึ่งกลางของ .parent ในแนว vertical

credit : http://davidwalsh.name/css-vertical-center
Wartenvy
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 22/12/2015 12:20 pm

Re: วิธี css จัดตำแหน่ง vertical auto

โพสต์ที่ยังไม่ได้อ่าน โดย Wartenvy »

โค้ดพวกนี้ถ้าผมสนใจจะศึกษาต้องเริ่มจากจุดไหนครับ
M027
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 758
ลงทะเบียนเมื่อ: 08/06/2015 10:07 am

Re: วิธี css จัดตำแหน่ง vertical auto

โพสต์ที่ยังไม่ได้อ่าน โดย M027 »

ไม่ทราบว่ามีพื้นฐานถึงขั้นไหนคับ หากยังไม่มีพื้นฐานแนะนำให้ศึกษา html กับ css ก่อนคับผม
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 38