6 เคล็ดลับ CSS เพื่อจัดแนวเนื้อหาในแนวตั้ง

, หนึ่งคือภาชนะอื่น ๆ องค์ประกอบเด็กซึ่งมีเนื้อหา.

ก่อนอื่นเราจะกำหนดตำแหน่งขององค์ประกอบคอนเทนเนอร์ให้สัมพันธ์จากนั้นเราตั้งตำแหน่งองค์ประกอบเด็กเป็น แน่นอน. สิ่งนี้ทำให้เราสามารถวางมันข้ามคอนเทนเนอร์ได้อย่างอิสระ.

หากต้องการจัดแนวตั้งในแนวตั้งให้ย้ายตำแหน่งองค์ประกอบลูกจากด้านบนโดยครึ่งหนึ่งของความสูงของคอนเทนเนอร์และดึงขึ้นครึ่งหนึ่งของความกว้างองค์ประกอบลูก นี่คือผลลัพธ์:

เคล็ดลับนี้สมบูรณ์แบบเมื่อมีเพียงองค์ประกอบลูกเดียวมิฉะนั้น แน่นอน ตำแหน่งจะส่งผลกระทบต่อองค์ประกอบอื่น ๆ ภายในภาชนะเดียวกัน.

2. ใช้การแปลง CSS3

การแปลง CSS3 ทำให้การใส่เนื้อหาตรงกลางเป็นเรื่องง่าย การแปลง CSS3 ไม่เหมือน ตำแหน่ง คุณสมบัติจะไม่ส่งผลกระทบต่อตำแหน่งขององค์ประกอบอื่น ๆ ภายในคอนเทนเนอร์เดียวกัน.

สมมติว่าเรามีโครงสร้าง HTML เช่นเดียวกับวิธีก่อนหน้านี้ - หนึ่งผู้ปกครองหนึ่งองค์ประกอบลูก - 50% จากด้านบนและการใช้การแปลง CSS ให้การแปล -50%. และคุณมีมัน.

โปรดทราบว่าการแปลง CSS3 จะไม่ทำงานใน Internet Explorer 8 และต่ำกว่า คุณอาจต้องการใช้วิธีอื่นใดก็ได้ที่นี่เพื่อเป็นทางเลือก.

3. ใช้แพ็ดดิ้ง

เรายังสามารถใช้ การขยายความ เพื่อสร้างภาพลวงตาของการจัดแนวตั้ง หากต้องการทำเช่นนั้นเพียงตั้งค่าการเติมด้านบนและด้านล่างเท่า ๆ กันดังนี้:

เคล็ดลับนี้เหมาะสำหรับเมื่อคุณไม่ได้ตั้งค่าความกว้างคงที่เพียงตั้งค่าความกว้างเป็น รถยนต์.

4. ใช้ Line Height

หากคุณมีเนื้อหาที่เป็นข้อความเพียงบรรทัดเดียวภายในคอนเทนเนอร์คุณสามารถจัดแนวข้อความในแนวตั้งโดยใช้ line-height คุณสมบัติ ตั้งค่า line-height ค่าประมาณเดียวกันกับความสูงของภาชนะและคุณจะเห็นผลลัพธ์ต่อไปนี้.

โปรดจำไว้ว่าเคล็ดลับนี้ใช้ได้กับข้อความบรรทัดเดียวเท่านั้น หากเนื้อหาแบ่งออกเป็นสองบรรทัดขึ้นไปช่องว่างระหว่างแต่ละบรรทัดจะเป็นตามที่เราระบุไว้ใน line-height, ทำให้เรามีช่องว่างมากเกินไป.

5. ใช้ CSS Table

โดยส่วนตัวแล้วการใช้ CSS Table เป็นเคล็ดลับที่ฉันชอบสำหรับการใช้การจัดตำแหน่งแนวตั้ง มันใช้งานได้ในเบราว์เซอร์รุ่นเก่าเช่น Internet Explorer 8 วิธีนี้ทำได้โดยการตั้งค่าการแสดงส่วนประกอบคอนเทนเนอร์ ตาราง, ในขณะที่องค์ประกอบของเด็กที่จะแสดงเป็น ตารางเซลล์ จากนั้นใช้ แนวตั้งชิด คุณสมบัติไปยังข้อความกึ่งกลางแนวตั้ง.

6. ใช้ Flexbox

วิธีสุดท้ายในการจัดกึ่งกลางแนวตั้งคือการใช้ Flexbox Flexbox เป็นโมดูลใหม่ใน CSS3 มันมีวิธีการที่ตรงไปตรงมามากขึ้นสำหรับการจัดตำแหน่งเนื้อหา หากต้องการจัดกึ่งกลางเนื้อหาในแนวตั้งในกล่องแบบเฟล็กซ์เพียงเพิ่ม จัดเรียงรายการ: กึ่งกลาง; ดังนี้และที่มัน.

โปรดทราบว่า Flexbox บางเบราว์เซอร์รองรับเฉพาะคุณสมบัติบางส่วนของโมดูล Flexbox เช่น Internet Explorer 10, Safari, 6 และ Chrome 27 และด้านล่าง ดังนั้นคล้ายกับเคล็ดลับกับการแปลง CSS3 ตรวจสอบให้แน่ใจว่าผลกระทบที่ตกอยู่ในเบราว์เซอร์เหล่านี้.