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

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

Moderator: mindphp

M027
PHP Super Hero Member
PHP Super Hero Member
Posts: 758
Joined: 08/06/2015 10:07 am

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

Post by M027 »

Example HTML

Code: Select all

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

Code: Select all

.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
Posts: 2
Joined: 22/12/2015 12:20 pm

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

Post by Wartenvy »

โค้ดพวกนี้ถ้าผมสนใจจะศึกษาต้องเริ่มจากจุดไหนครับ

M027
PHP Super Hero Member
PHP Super Hero Member
Posts: 758
Joined: 08/06/2015 10:07 am

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

Post by M027 »

ไม่ทราบว่ามีพื้นฐานถึงขั้นไหนคับ หากยังไม่มีพื้นฐานแนะนำให้ศึกษา html กับ css ก่อนคับผม

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 11 guests