Căn lề trong HTML

Align là sự thiết lập vị trí của phần tử hoặc nội dung của phần tử. Trong CSS có rất nhiều thuộc tính cho phép căn chỉnh (align) một phần tử như margin, padding, text-align, position, float…Align giúp ích cho bạn rất nhiều trong quá trình định dạng văn bản, hình ảnh.

Ở bài viết này, Webaffiliatevn.com sẽ cùng bạn tìm hiểu một số align thường hay sử dụng nhất. Mời bạn đọc theo dõi.

     1. Căn lề cho văn bản trong HTML bằng thuộc tính text-aligh

Để có thể căn chỉnh văn bản trong HTML, bạn hãy sử dụng thuộc tính style. Thuộc tính style chỉ định một kiểu nội tuyến cho một phần tử. Thuộc tính được sử dụng với thẻ HTML <p>, với thuộc tính CSS việc căn chỉnh văn bản cho căn giữa, căn trái và phải được thực hiện một cách dễ dàng. Nhưng các bạn lưu ý đối với phiên bản HTML5 thuộc tính align không còn hỗ trợ cho thẻ <p>, vì thế, kiểu CSS được sử dụng để đặt căn chỉnh văn bản.

Chỉ cần lưu ý, việc sử dụng thuộc tính style sẽ ghi đè bất kỳ style nào được thiết lập trên toàn cầu. Nó sẽ ghi đè bất kỳ kiểu nào được đặt trong thẻ HTML <style> hoặc trang định kiểu bên ngoài.

Ví dụ:

Bạn có thể thử chạy đoạn mã sau để đặt căn chỉnh văn bản trong HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Ví dụ về sử dung thuộc tính style để căn chỉnh HTML</title>
   </head>

   <body>
      <h1>Webaffilatevn</h1>
      <p style="text-align:center;">Đoạn văn được căn giữa</p>
   </body>
</html>

See the Pen wvGMpzo by DavidKhai (@davidkhai) on CodePen.dark

 

   

2. Canh lề cho phần tử bằng thuộc tính margin trong CSS

Thuộc tính margin dùng để canh lề cho phần tử.

Dưới đây là một số thuộc tính margin:

  • margin-top (canh lề phía trên)
  • margin-right (canh lề bên phải)
  • margin-bottom (canh lề phía dưới)
  • margin-left (canh lề bên trái)

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        h2{
            border:1px solid black;
            margin-top:25px;
            margin-right:45px;
            margin-bottom:100px;
            margin-left:200px;
        }
    </style>
</head>
<body>
    <h2>Ví dụ về sử dụng thuộc tính margin để căn chỉnh.</h2>
    <hr>
</body>
</html>

See the Pen GRZoyWo by DavidKhai (@davidkhai) on CodePen.dark

 

Lưu ý: Giá trị của thuộc tính margin có thể xác định theo đơn vị: px, em, %, hoặc inherit (kế thừa giá trị của phần tử chứa nó), auto (trình duyệt tự động thiết lập giá trị)

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .div1{
            border:1px solid black;
            margin-top:20px;
            margin-left:50px;
            margin-bottom:30px;
            margin-left:150px;
        }
        .div2{
            border:3px solid red;
            margin-left: inherit;
        }
        .div3{
            border:1px solid blue;
            width:300px;
            margin-left:auto;
        }
        .div4{
            border:1px solid green;
            width:300px;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">Hướng dẫn học HTML</div>
    </div>
    <hr>
    <div class="div3">Hướng dẫn học CSS</div>
    <hr>
    <div class="div4">Hướng dẫn học JS</div>
</body>
</html>

See the Pen zYqrpzM by DavidKhai (@davidkhai) on CodePen.dark

 

     3. Căn giữa cho phần tử – Sử dụng margin:auto

Trong CSS, để căn giữa một phần tử khối ta sử dụng thuộc tính margin có giá trị là auto để căn chỉnh phần tử nằm ở giữa so với phần tử cha của nó.

Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề:

Ví dụ:

<!DOCTYPE html>
<html>
    <head>
    <style>
      .center {
          margin: 0 auto;
          width: 50%;
          border: 2px solid red;
          padding: 15px;
      }
    </style>
    </head>
    <body>

      <h2>Căn giữa cho phần tử</h2>
      <p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử 
dụng margin: 0 auto.</p>

      <div class="center">
        <p><b>Note: </b>Đây là ví dụ cho thấy phần tử được căn giữa bằng thuộc tính margin: 0 auto, với chiều rộng là 50% ,khoảng cách trên dưới trái phải là 15px,...</p>
      </div>

    </body>
</html>

See the Pen gOrPojg by DavidKhai (@davidkhai) on CodePen.dark

 

Chú ý:

  • Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width (hoặc widthcó giá trị là 100%) vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.
  • Thuộc tính margin: auto chỉ căn giữa cho phần tử block như các thẻ từ h1 đến h6…còn các phần tử inline như em, a, strong, b,.. sẽ không được áp dụng.
  • Có thể ghi đè lại phần tử hiển thị block hay inline bằng cách sử dụng thuộc tính display. Ví dụ: span { display: block;}.

     4. Căn giữa hình ảnh với thuộc tính margin

Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
</style>
</head>
<body>

   <h2>Căn giữa hình ảnh</h2>
   <p>Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm 
cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.</p>

   <img src="https://webaffiliatevn.com/wp-content/uploads/2020/06/quan-tri-website-la-gi-1.png" alt="quản trị web" style="width:60%">

</body>
</html>

See the Pen PoNZEVj by DavidKhai (@davidkhai) on CodePen.dark

 

     5. Căn trái/phải – Sử dụng position

Một phương pháp khác để căn chỉnh phần tử là sử dụng position: absolute.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  .right {
    position: absolute;
    right: 50px;
    width: 200px;
    border: 3px solid red;
    padding: 12px;
  }
</style>
</head>
<body>

    <h2>Căn phải sử dụng position</h2>
     <p>Webaffiliate , Chúng tôi cung cấp dịch vụ thiết kế web bán hàng dưới hình thức tiếp thị liên kết có thể lấy dữ liệu sản phẩm từ bất kì website nào bạn thích, có gắn deeplink affilliate để hỗ trợ các Publisher làm affiliate dễ dàng hơn, chuyên nghiệp, bền vững hơn mà không cần quá nhiều thời gian, công sức, chi phí! 

    </p>

    <div class="right">
     <p>Bạn lo sợ mình kinh doanh online không thành công? nếu vậy thì hãy tập kinh doanh và tiếp thị online trước khi đi vào thực chiến, cạnh tranh trực tiếp với các đối thủ mạnh trên internet.

    Giải pháp cho bạn chính là làm tiếp thị liên kết, nhưng muốn làm tiếp thị liên kết lâu dài, bền vững như một doanh nghiệp online thực thụ bạn cần đến một website.

    Hãy đến với chúng tôi!!!</p>
    </div>

</body>
</html>

See the Pen bGpEayL by DavidKhai (@davidkhai) on CodePen.dark

 

     6. Căn trái/phải – Sử dụng float

Thuộc tính float cũng được sử dụng để căn chỉnh phần tử.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  .right {
    float: right;
    width: 200px;
    border: 3px solid red;
    padding: 12px;
  }
</style>
</head>
<body>

    <h2>Căn phải sử dụng position</h2>
     <p>Webaffiliate , Chúng tôi cung cấp dịch vụ thiết kế web bán hàng dưới hình thức tiếp thị liên kết có thể lấy dữ liệu sản phẩm từ bất kì website nào bạn thích, có gắn deeplink affilliate để hỗ trợ các Publisher làm affiliate dễ dàng hơn, chuyên nghiệp, bền vững hơn mà không cần quá nhiều thời gian, công sức, chi phí! 

    </p>

    <div class="right">
     <p>Bạn lo sợ mình kinh doanh online không thành công? nếu vậy thì hãy tập kinh doanh và tiếp thị online trước khi đi vào thực chiến, cạnh tranh trực tiếp với các đối thủ mạnh trên internet.

    Giải pháp cho bạn chính là làm tiếp thị liên kết, nhưng muốn làm tiếp thị liên kết lâu dài, bền vững như một doanh nghiệp online thực thụ bạn cần đến một website.

    Hãy đến với chúng tôi!!!</p>
    </div>

</body>
</html>

See the Pen OJNMzKx by DavidKhai (@davidkhai) on CodePen.dark

Chú ý: Nếu một phần tử đang được float cao hơn phần tử cha thì sẽ gây ra hiện tượng tràn nội dung ra bên ngoài. Để khắc phục, ta sử dụng clearfix overflow: auto:

.clearfix {
  overflow: auto;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    border: 3px solid green;
    padding: 10px;
  }

  .img1 {
    float: right;
  }

  .clearfix {
    overflow: auto;
  }

  .img2 {
    float: right;
  }
</style>
</head>
<body>

  <p>Trong ví dụ này, hình ảnh đang được float vào cao hơn thành phần chứa nó, 
  do đó bị tràn ra bên ngoài:</p>

  <div>
  <img class="img1" src="https://webaffiliatevn.com/wp-content/uploads/2020/08/1581836855-c0d19e3f95c452e4aa46889009f04c2c.jpg" alt="Dưa hấu" width="170" height="170">
  Citrullus lanatus là một loài thực vật thuộc họ Cucurbitaceae, một loài thực vật có hoa giống như cây nho có nguồn gốc từ Tây Phi. Nó được trồng để lấy quả. Dưa này phân chia thành hai giống, dưa hấu và Citrullus caffer bắt nguồn từ việc đặt tên sai lầm của Citrullus lanatus Matsum
  </div>

  <p style="clear:right">Sử dụng class clearfix với giá trị overflow: auto để 
  khắc phục:</p>

  <div class="clearfix">
  <img class="img2" src="https://webaffiliatevn.com/wp-content/uploads/2020/08/1581836855-c0d19e3f95c452e4aa46889009f04c2c.jpg" alt="Dưa hấu" width="170" height="170">
  Citrullus lanatus là một loài thực vật thuộc họ Cucurbitaceae, một loài thực vật có hoa giống như cây nho có nguồn gốc từ Tây Phi. Nó được trồng để lấy quả. Dưa này phân chia thành hai giống, dưa hấu và Citrullus caffer bắt nguồn từ việc đặt tên sai lầm của Citrullus lanatus Matsum 
  </div>

</body>
</html>

See the Pen NWNxyqz by DavidKhai (@davidkhai) on CodePen.dark

 

     7. Căn giữa theo chiều dọc – Sử dụng padding

Có nhiều cách để căn giữa một phần tử theo chiều dọc trong CSS. Giải pháp đơn giản nhất đó là sử dụng padding.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
          padding: 50px 0;
          border: 3px solid red;
        }
    </style>
</head>
<body>

  <h2>Căn giữa theo chiều dọc - Sử dụng padding</h2>
   <p>Ví dụ này, chúng tôi sử dụng thuộc tính padding để căn giữa phần tử div 
    theo chiều dọc:</p>

  <div class="center">
    <p>Website Webafffiliavn</p>
  </div>

</body>
</html>

See the Pen xxVZYVw by DavidKhai (@davidkhai) on CodePen.dark

 

     8. Căn giữa theo chiều dọc – Sử dụng line-height

Bạn cũng có cách khác để căn giữa theo chiều dọc là sử dụng thuộc tính line-height với giá trị giống như thuộc tính height.

Ví dụ:

.center {
line-height: 70px;
height: 70px;
border: 3px solid red;
text-align: center;
}

/* Nếu văn bản có nhiều dòng, thêm vào như sau: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

See the Pen rNexJLX by DavidKhai (@davidkhai) on CodePen.dark

 

     9. Căn giữa theo chiều dọc – Sử dụng position và transform

Nếu không sử dụng padding và line-height như trên, bạn có thể dùng cách thứ ba là sử dụng position và transform:

.center { 
  height: 70px;
  position: relative;
  border: 3px solid red; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

See the Pen zYqrRox by DavidKhai (@davidkhai) on CodePen.dark

>>> Xem thêm:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *