CSS Align

การกำหนดตำแหน่ง การวางตัวอักษร และกรอบ

CSS Layout — Horizontal & Vertical Align

การจัดตำแหน่งแนวนอนและแนวตั้ง

CSS Layout — Horizontal & Vertical Align

CSS

.center {
   margin: auto;  //ระยะขอบ ผลักอัตโนมัติ
   width: 50%;   //ความกว้าง 50%
   border: 3px solid blue;   //ความหนา รูปแบบ สีของขอบ
   padding: 3%;  //ขยายขอบด้านใน
}

HTML

<div class="container p-3">
   <h2>CSS Layout - Horizontal & Vertical Align</h2>
   <div class="center">
      <p>
      <b>Note: </b>
Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.
      </p>
   </div>
</div>

Center Align Text

การจัดกึ่งกลางให้กับข้อความ โดยใช้ text-align: center;

Center Align Text

CSS

.center {
   text-align: center;   //ข้อความ อยู่ตรงกลาง
   border: 3px solid blue;   //ความหนา รูปแบบ สีของเส้นขอบ
   padding: 3%;   //ขยายขอบของข้อความ
}

HTML

<div class="container p-3">
   <h2>Center Align Text</h2>
   <div class="center">
      <p><b>Note: </b>This text is centered.</p>
   </div>
</div>

Center an Image

การจัดกึ่งกลางให้กับรูปภาพ

Center an Image

CSS

img {
   display: block;   //แสดงในบล็อก ในกล่อง
   margin-right: auto;  //ระยะขอบขวา auto
   margin-left: auto;   // ระยะขอบซ้าย auto
}
//การปรับแบบนี้ทำให้ กล่องข้อความของเราไปอยู่ตรงกลาง และขึ้นอยู่กับเนื้อหาว่าจะยาวมากน้อยเพียง

HTML

<div class="container p-3">
   <h2>Center an Image</h2>
   <div class="center">
   <img src="./assets/EasyJung5.png" alt="EasyJung" style="width: 40%;">
   </div>
</div>

Left and Right Align — Using position

การจัดซ้าย และขวา โดยใช้ [position: absolute;] ตำแหน่งที่แน่นอน

Left and Right Align — Using position

CSS

p  {
   position: absolute;  //กำหนดตำแหน่งที่แน่นอน
   right: 0px;   //ด้านขวา 0px ทำให้ติดขอบด้านขวาชนิดเลย
   width: 300px;   //ความกว้างของกรอบข้อความ
   border: 3px solid #73AD21;   //ความหนา รูปแบบ สีของเส้นขอบ
   padding: 10px;    //ขยายขอบของข้อความ
}

HTML

<div class="container p-3">
   <h2>Left and Right Align - Using position</h2>
   <div class="center">
      <p>
         <img src="./assets/EasyJung5.png" alt="EasyJung" style="width: 40%;"><br>
         <span>Left and Right Align - Using position</span>
      </p>
   </div>
</div>

Left and Right Align — Using float

การจัดซ้าย และขวา โดยใช้ [float: ………;] ลอย

Left and Right Align — Using float

CSS

p  {
   float: right;  //ลอยไปอยู่ด้านขวา แต่ไม่ชิดขวา
   width: 300px;   //ความกว้างของกรอบข้อความ
   border: 3px solid #73AD21;  //ความหนา รูปแบบ สีของเส้นของ
   padding: 10px;  //ขยายขอบของข้อความ
}

HTML

<div class="container p-3">
   <h2>Left and Right Align - Using float</h2>
   <div class="center">
      <p>
         <img src="./assets/EasyJung5.png" alt="EasyJung" style="width: 40%;"><br>
         <span>Left and Right Align - Using float</span>
      </p>
   </div>
</div>

The clearfix Hack

การ Clear พื้นที่เพื่อ รับสิ่งต่างๆ เข้ามา

ไม่ได้ใช้ overflow : auto; ก็จะไม่อยู่ในขอบสีเขียว

ใช้ overflow : auto; ก็จะอยู่ในขอบสีเขียว

C SS

p  {
   border: 3px solid #73AD21;  //ความหนา รูปแบบ สีของเส้นขอบ
   padding: 10px;   //ขยายขอบของข้อความ
   overflow: auto;   //ให้มาอยู่ขอบสีเขียว
}
img {
   float: right;  //กำหนดให้รูปภาพ ไปอยู่ด้านขวา 
}

HTML

<div class="container p-3">
   <h2>The clearfix Hack</h2>
   <div class="center">
      <p>
         <img src="./assets/EasyJung5.png" alt="EasyJung" style="width: 40%;"><br>
         <span>The clearfix Hack</span>
      </p>
   </div>
</div>

การจัดตำแหน่งแบบแนวตั้ง Vertically หลังจากนี้

โดยใช้ Property ดังนี้ 
padding : ............;  //ขยายขอบข้อความ
text-align : .............;   //ตำแหน่ง
line-height : ..............;   //
height : .............;
transform : ..............;

Center Vertically — Using padding

การจัดตรงกลางแบบแนวตั้ง โดยใช้ [padding: ………;]

Center Vertically — Using padding

CSS

p {
   padding: 70px 0;  //ขยายขอบ ด้านบน - ล่าง และชิดซ้ายสนิทเลย
   border: 3px solid green;  //ความหนา รูปแบบ สีของเส้นขอบ
}

HTML

<div class="container p-3">
   <h2>Center Vertically - Using padding</h2>
   <div class="center">
      <p>
         <span>Center Vertically - Using padding</span>
      </p>
   </div>
</div>

ถ้าต้องการจัดตรงแนวตั้ง ให้อยู่กึ่งกลาง เราจะใช้ [padding และ tex-align: center;]

การจัดตรงแนวตั้ง ให้อยู่กึ่งกลาง

CSS

p {
   padding: 70px 0;  //ขยายขอบ ด้านบน-ล่าง และชิดซ้าย
   border: 3px solid green;  //ความหนา รูปแบบ สีของเส้นขอบ
   text-align: center;   //ข้อความอยู่ตรงกลาง
}

Center Vertically — Using line-height

การจัดกึ่งกลางแบบแนวตั้ง โดยใช้ [line-height]

Center Vertically — Using line-height

CSS

.center {
   line-height: 200px;  //ห่างจากขอบด้านบน ลงมา
   height: 200px;   //ความสูงของขอบ
   border: 3px solid green;  //ความหนา รูปแบบ สีของเส้นขอบ
   text-align: center;   //ข้อความอยู่ตรงกลาง
}
.center p {
   line-height: 1.5;  //ข้อความห่างจากด้านบน ลงมา
   display: inline-block;   //ทำให้ข้อความมาอยู่ขอบสีเขียว
   vertical-align: middle;   //ตำแหน่งแนวตั้งอยู่ตรงกลาง
}

HTML

<div class="container p-3">
   <h2>Centering</h2>
   <p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>
   <div class="center">
      <p>I am vertically and horizontally centered.</p>
   </div>
</div>

Center Vertically — Using position & transform

การจัดกึ่งกลางแบบแนวตั้ง โดยใช้ [position และ transform]

Center Vertically — Using position & transform

CSS

.center {
   height: 200px;  //ความสูงของเส้นขอบ
   position: relative;  //ตำแหน่งสืบทอดมาจากพ่อแม่ 
   border: 3px solid green;  //ความหนา รูปแบบ สีของเส้นขอบ
}
.center p {
   margin: 0;  //ระยะขอบ ความกว้างของข้อความ
   position: absolute;   //กำหนดตำแหน่งที่แน่นอน
   top: 50%;   //ด้านบน
   left: 50%;   //ด้านซ้าย
   -ms-transform: translate(-50%, -50%);  
   transform: translate(-50%, -50%);
}

HTML

<div class="container p-3">
   <h2>Centering</h2>
   <p>
In this example, we use the position & transform property with a value that is equal to the height property to center the div element:
   </p>
   <div class="center">
      <p>I am vertically and horizontally centered.</p>
   </div>
</div>

การจัดตำแหน่งในแบบต่างๆ Vertically : แนวตั้ง , Horizontally : แนวนอน , Left : ซ้าย , Right : ขวา , Center : ตรงกลาง เลือกที่เหมาะกับชิ้นงาน ทำให้ง่ายและดูดี เรียบหรู แต่ดูดี