ในบทช่วยสอน CSS นี้ เราจะพูดถึงวิธีจัดข้อความและบล็อกองค์ประกอบให้อยู่ตรงกลาง มีเทคนิคหลายอย่างที่คุณสามารถใช้เพื่อจัดวางองค์ประกอบในแนวนอนและแนวตั้งในเลย์เอาต์ได้
จัดกึ่งกลางองค์ประกอบข้อความ
หากต้องการจัดข้อความให้อยู่กึ่งกลางภายในองค์ประกอบที่ใหญ่ขึ้น ให้ใช้ text-align: center; ดังที่เห็นด้านล่าง:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
.div-class {
text-align: center;
background-color: lightblue;
}
button {
width: 200px;
}
</style>
</head>
<body>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by text-align: center</p>
</div>
</body>
</html>
จัดวางองค์ประกอบบล็อกให้อยู่ตรงกลาง:
องค์ประกอบบล็อกที่อยู่ตรงกลางจะแสดงได้ดีที่สุดโดยใช้ <body> แท็กของเอกสาร HTML สิ่งที่คุณต้องทำคือควบคุมความกว้างของคอนเทนเนอร์โดยรวมแล้วตั้งค่าระยะขอบเป็นอัตโนมัติ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
</body>
</html>
จัดกึ่งกลางรูปภาพ:
หากต้องการจัดกึ่งกลางรูปภาพ ในตัวเลือก CSS ให้เปลี่ยนการแสดงผลเพื่อบล็อกแล้วควบคุมความกว้างขององค์ประกอบรูปภาพ โดยใช้ % หรือ px . ตั้งค่า margin เป็น auto :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'Roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
<p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
<img src="https://www.placekitten.com/500/301" alt="kittens"/>
</body>
</html>
จัดกึ่งกลางในแนวตั้งและแนวนอนใน Div:
ช่องว่างภายใน:
เพื่อจัดกึ่งกลางในแนวตั้งใน <div> มีหลายวิธีที่จะทำ อย่างแรกและน่าจะง่ายที่สุดคือการปรับ padding ใน <div> . ของคุณ – จากนั้นคุณสามารถใช้ text-align: center เพื่อจัดย่อหน้าให้อยู่ในแนวนอน:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'Roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
<p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
<img src="https://www.placekitten.com/500/301" alt="kittens"/>
</body>
</html>
ความสูงของบรรทัด:
คุณยังสามารถตั้งค่าความสูงของเส้นเป็นความสูงขององค์ประกอบบล็อกที่คุณจัดกึ่งกลางร่วมกับการจัดตำแหน่งข้อความ:กึ่งกลาง เพื่อจัดแนวองค์ประกอบให้อยู่ตรงกลาง หากคุณมีหลายบรรทัด ให้ใช้ line-height ทั้งบน parent และ child และเพิ่ม vertical-align: middle และ display: inline-block ถึงเด็ก:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-lineheight {
line-height: 200px;
border: 5px double ivory;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="vertical-center-lineheight">
<p>I am vertically centered and horizontally centered in a div using lineheight and text-align: center.</p>
</div>
<div id="vertical-center-lh-multiple">
<p>I am vertically centered and horizontally centered in a div using lineheight, display: inline-block, and vertical-align: middle. Use me when you have multiple lines of text to center across horizontal and vertical axes. </p>
</div>
</body>
</html>
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
แปลงร่าง:
อีกวิธีหนึ่งที่คุณสามารถจัดองค์ประกอบให้อยู่ตรงกลางได้คือการใช้ตำแหน่งและการแปลง ตั้งค่าองค์ประกอบหลักเป็นตำแหน่ง:สัมพันธ์ องค์ประกอบย่อยเป็นตำแหน่งที่แน่นอน องค์ประกอบลูกจะต้องอยู่ในตำแหน่งที่ด้านบนและซ้ายที่ 50% จากนั้นเราใช้คุณสมบัติการแปลงเพื่อปรับข้อความใน div เราจะพูดถึงคุณสมบัตินี้เพิ่มเติมในโพสต์อื่น ดังนั้นไม่เป็นไรหากยังไม่ชัดเจน 100 เปอร์เซ็นต์ในขณะนี้:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-transform {
height: 200px;
position: relative;
border: 5px double ivory;
margin-bottom: 20px;
}
#vertical-center-transform p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="vertical-center-transform">
<p>I am vertically centered and horizontally centered in a div using transform. Text is <strong>NOT</strong> center aligned.</p>
</div>
</body>
</html>
เฟล็กซ์บ็อกซ์:
สุดท้าย เราสามารถจัดองค์ประกอบให้อยู่ตรงกลางโดยใช้ flexbox ตั้งค่าการแสดงผล:ดิ้นไปที่องค์ประกอบหลักของเด็กที่คุณต้องการจัดกึ่งกลาง จากนั้นใช้ align-items และ justify-content เพื่อจัดกึ่งกลาง:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-flexbox {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: 5px double ivory;
}
</style>
</head>
<body>
<div id="vertical-center-flexbox">
<p>I am vertically and horizontally centered in a div using flexbox.</p>
</div>
</body>
</html>
นี่เป็นวิธีทั่วไปที่สุดในการแก้ปัญหาการจัดวางองค์ประกอบให้อยู่ในเลย์เอาต์ของคุณ
