CSS การจัดตัวน้ำตาลและตัวตรง

องค์ประกอบตั้งตรงกลาง

องค์ประกอบที่จัดตัวตรงกลางทั้งระดับน้ำตกและระดับตั้ง

จัดตัวองค์ประกอบตั้งตรงกลาง

เพื่อที่จะทำให้องค์ประกอบบล็อค (เช่น <div>) จัดตัวตรงกลางระดับน้ำตก โปรดใช้ margin: auto;.

การตั้งค่าความกว้างขององค์ประกอบจะป้องกันไม่ให้มันขยายตัวไปจนถึงขอบของตัวแทน

หลังจากนั้น องค์ประกอบจะใช้ความกว้างที่กำหนด และช่องว่างที่เหลือจะแบ่งเท่าๆกันระหว่างระยะทางด้านนอก

ตัวองค์ประกอบ div นี้ถูกจัดตัวตรงกลาง

ตัวอย่าง

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

ลองทดสอบด้วยตัวเอง

สัญญาณ:ถ้ายังไม่ได้ตั้งค่า width ค่า (หรือตั้งเป็น 100%) จัดตัวตรงกลางจะไม่มีผล

จัดตัวข้อความตั้งตรงกลาง

ถ้าต้องการจัดตัวข้อความตรงกลางภายในองค์ประกอบ โปรดใช้ text-align: center;:

ข้อความนี้ถูกจัดตัวตรงกลาง

ตัวอย่าง

.center {
  text-align: center;
  border: 3px solid green;
}

ลองทดสอบด้วยตัวเอง

คำแนะนำ:สำหรับตัวอย่างเพิ่มเติมเกี่ยวกับการจัดตัวข้อความ โปรดดู CSS ข้อความ บทที่นี้

จัดตัวรูปภาพตั้งตรงกลาง

ถ้าต้องการจัดตัวรูปภาพให้ตั้งตรงกลาง โปรดตั้งระยะทางด้านนอกของรูปภาพเท่ากัน autoและจัดให้เป็นองค์ประกอบบล็อค:

ตัวอย่าง

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

ลองทดสอบด้วยตัวเอง

การจัด lining ซ้ายและขวา - ใช้ position

วิธีตั้งตำแหน่งองค์ประกอบอีกอย่างคือ ใช้ position: absolute; :

div นี้เป็นการจัด lining ซ้ายขวา

ตัวอย่าง

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

ลองทดสอบด้วยตัวเอง

สัญญาณ:องค์ประกอบที่ใช้ position absolute จะถูกถอดออกจากกระแสปกติ และอาจทำให้เกิดการขนานขององค์ประกอบ

การจัด lining ซ้ายและขวา - ใช้ float

วิธีตั้งตำแหน่งองค์ประกอบอีกอย่างคือ ใช้ float คุณสมบัติ:

ตัวอย่าง

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

ลองทดสอบด้วยตัวเอง

สัญญาณ:ถ้าองค์ประกอบหนึ่งสูงกว่าองค์ประกอบที่มีอิสระ และมันเป็น float มันจะไหลออกนอกจากตัวแก้ว clearfix hack ที่จะแก้ปัญหานี้ (ดูตัวอย่างด้านล่าง)

clearfix Hack

จากนั้นเราสามารถเพิ่ม overflow: auto;ที่จะแก้ปัญหานี้

ตัวอย่าง

.clearfix {
  overflow: auto;
}

ลองทดสอบด้วยตัวเอง

การจัด lining ตั้งแต่ด้านบน - ใช้ padding

มีวิธีมากมายที่จะจัด lining ตั้งแต่ด้านบนใน CSS โดยง่าย คือ ใช้ margin ด้านบนและด้านล่าง

ฉันเป็นศูนย์กลางตั้งแต่ด้านบน

ตัวอย่าง

.center {
  padding: 70px 0;
  border: 3px solid green;
}

ลองทดสอบด้วยตัวเอง

ถ้าต้องการจัด lining ตั้งแต่ด้านบนและตั้งแต่ด้านข้าง ใช้ padding และ text-align: center;:

ฉันตั้งตรงแบบน้ำตาลและตรงแบบตั้ง

ตัวอย่าง

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

ลองทดสอบด้วยตัวเอง

การจัด lining ตั้งแต่ด้านบน - ใช้ line-height

แผนกลฎาต์หนึ่งคือ ใช้ค่าของมันเท่ากับ height คุณสมบัติของค่า line-height คุณสมบัติ:

ฉันตั้งตรงแบบน้ำตาลและตรงแบบตั้ง

ตัวอย่าง

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* ถ้ามีข้อความมากกว่าแถว ให้เพิ่มรหัสด้านล่างนี้: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

ลองทดสอบด้วยตัวเอง

การจัด lining ตั้งแต่ด้านบน - ใช้ position และ transform

ถ้าคุณเลือกไม่ใช่ padding และ line-heightนั้น แล้ววิธีแก้ปัญหาอีกทางหนึ่งคือ ใช้ position และ transform คุณสมบัติ:

ฉันตั้งตรงแบบน้ำตาลและตรงแบบตั้ง

ตัวอย่าง

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: ย้าย(-50%, -50%);
}

ลองทดสอบด้วยตัวเอง

คำแนะนำ:คุณจะได้รับความรู้เกี่ยวกับ การเปลี่ยนแปลง 2D คุณจะได้รับความรู้เกี่ยวกับคุณสมบัติ transform มากยิ่งขึ้นในบทนี้

การศูนย์กลางตั้งตรง - ใช้ Flexbox

คุณยังสามารถใช้ flexbox ในการศูนย์กลางเนื้อหาได้ โปรดจำได้ว่า IE10 และเวอร์ชั่นเก่ากว่านี้ไม่สนับสนุน flexbox:

ฉันตั้งตรงแบบน้ำตาลและตรงแบบตั้ง

ตัวอย่าง

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

ลองทดสอบด้วยตัวเอง

คำแนะนำ:คุณจะได้รับความรู้เกี่ยวกับ CSS Flexbox คุณจะได้รับความรู้เกี่ยวกับ Flexbox มากยิ่งขึ้นในบทนี้