กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

เค้าโครง 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:

I am vertically and horizontally centered.

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.


Test Yourself With Exercises

Exercise:

Use the margin property to make sure that the <div> element is center aligned according to its parent element.

<style>
.intro {
  width: 200px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor. </div> </body>