เค้าโครง CSS - จัดแนวแนวนอนและแนวตั้ง
จัดองค์ประกอบ
ในแนวนอนและแนวตั้ง
ศูนย์จัดองค์ประกอบ
หากต้องการจัดองค์ประกอบบล็อกให้อยู่ตรงกลางแนวนอน (เช่น <div>) ให้ใช้margin: auto;
การตั้งค่าความกว้างขององค์ประกอบจะป้องกันไม่ให้ยื่นออกไปถึงขอบของภาชนะ
จากนั้นองค์ประกอบจะใช้ความกว้างที่ระบุ และพื้นที่ที่เหลือจะถูกแบ่งเท่าๆ กันระหว่างระยะขอบทั้งสอง:
องค์ประกอบ div นี้อยู่ตรงกลาง
ตัวอย่าง
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
หมายเหตุ:การจัดตำแหน่งกึ่งกลางจะไม่มีผลหากwidth
ไม่ได้ตั้งค่าคุณสมบัติ (หรือตั้งค่าเป็น 100%)
ข้อความจัดกึ่งกลาง
หากต้องการจัดข้อความให้อยู่ตรงกลางองค์ประกอบ ให้ใช้text-align: center;
ข้อความนี้อยู่ตรงกลาง
ตัวอย่าง
.center {
text-align: center;
border: 3px solid green;
}
เคล็ดลับ:สำหรับตัวอย่างเพิ่มเติมเกี่ยวกับวิธีการจัดแนวข้อความ ดูบทCSS Text
จัดกึ่งกลางภาพ
หากต้องการจัดกึ่งกลางรูปภาพ ให้ตั้งค่าระยะขอบซ้ายและขวาauto
ให้เป็นblock
องค์ประกอบ:
ตัวอย่าง
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
จัดตำแหน่งซ้ายและขวา - ใช้ตำแหน่ง
วิธีหนึ่งสำหรับการจัดแนวองค์ประกอบคือการใช้position: absolute;
:
ในวัยที่อ่อนกว่าและอ่อนแอกว่า พ่อของฉันได้ให้คำแนะนำบางอย่างแก่ฉันซึ่งฉันก็คิดวนอยู่ในใจตั้งแต่นั้นเป็นต้นมา
ตัวอย่าง
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
หมายเหตุ:องค์ประกอบที่อยู่ในตำแหน่งสัมบูรณ์จะถูกลบออกจากการไหลปกติ และสามารถซ้อนทับองค์ประกอบได้
จัดตำแหน่งซ้ายและขวา - ใช้ float
อีกวิธีหนึ่งในการจัดแนวองค์ประกอบคือการใช้float
คุณสมบัติ:
ตัวอย่าง
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
แฮ็คเคลียร์ฟิกซ์
หมายเหตุ:หากองค์ประกอบสูงกว่าองค์ประกอบที่มีอยู่ และลอยอยู่ องค์ประกอบนั้นจะล้นออกนอกคอนเทนเนอร์ คุณสามารถใช้ "clearfix hack" เพื่อแก้ไขปัญหานี้ได้ (ดูตัวอย่างด้านล่าง)
ไม่มี Clearfix
ด้วย Clearfix
จากนั้นเราสามารถเพิ่มการแฮ็ก clearfix ให้กับองค์ประกอบที่มีเพื่อแก้ไขปัญหานี้:
ตัวอย่าง
.clearfix::after {
content: "";
clear: both;
display: table;
}
จัดกึ่งกลางในแนวตั้ง - ใช้ช่องว่างภายใน
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding
:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding
and text-align: center
:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height
property with a value that is equal
to the height
property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding
and line-height
are not options, another solution is to use positioning and the transform
property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.