จัดตำแหน่งข้อความ รูปภาพ CSS

คำสั่ง align เป็นการจัดการเกี่ยวตำแหน่งชิดซ้าย ชิดขวา กลาง ให้กับ element

ตัวอย่างที่ 1

เป็นการจัดกึ่งกลางของข้อความ โดยการใช้คำสั่ง text-align:center ให้ประโยค “Hello This is CSS. ให้อยู่กึ่งกลางของกล่องข้อความ

HTML

 <div class="container">
<h1>Hello This is CSS.</h1>
</div>
</body>

CSS
.container{
width:400px; // กำหนดความกว้างให้กับ container 
border:solid 1px red; // กำหนดขอบ
height:auto; // กำหนดความสูง
margin:10% auto; // กำหนดความห่าง
}

h1{
color:blue; // กำหนดสี
font-size:30px; กำหนดขนาดของข้อความ 
text-align:center; // จัดให้อยู่กึ่งกลางของกล่อง
}

 

ตัวอย่างที่ 2

ในการจัดรูปภาพให้อยู่กึ่งกลางจอคอมพิวเตอร์ จริงๆ มีวิธีเขียนได้หลายแบบนะครับ แล้วแต่ว่าจะใช้แบบไหนแค่นั้นเอง เหมือนกันหิว จะกินข้าวก็ได้ กินก๋วยเตี๋ยวหรือกินขนมปังก็อิ่มเหมือนกัน

HTML
<div class="container">

<img src="nike.jpg" alt="">
<img src="nike.jpg" alt="">
<img src="nike.jpg" alt="">
<img src="nike.jpg" alt="">
</div>

CSS
.container{
   max-width:800px; 
   height:auto;
   margin:0 auto;
   display:grid;
   grid-template-columns:repeat(4, 1fr);
   justify-content:center;
   border:solid 1px #000;
   padding-right:50%;
   padding-left:50%;  
}

img{
    width:100px;
    height:80px;
    margin-right:20px;     
}