Căn lề trái trong html

KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?

Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!

>>>> Tham khảo khóa học đã giúp mình tại:
[affegg id=8]

Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40

Còn bây giờ thì vào bài viết thôi!

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

, 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ẻ

, 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

Ví dụ về sử dụng thuộc tính margin để căn chỉnh.

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ụ:

    


    

        
Hướng dẫn học HTML
    
    

    
Hướng dẫn học CSS
    

    
Hướng dẫn học JS

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ụ:

    
    
    
    

      
Căn giữa cho phần tử
      
Để 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.

      

        
Note: Đâ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,...
      

    

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ừ h2 đế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ụ:

   
Căn giữa hình ảnh
   
Để 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.

   

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ụ:

    
Căn phải sử dụng position
     
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í! 

    

    

     
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!!!
    

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ụ:

    
Căn phải sử dụng position
     
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í! 

    

    

     
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!!!
    

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ụ:

  
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:

  

  

  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
  

  
Sử dụng class clearfix với giá trị overflow: auto để 
  khắc phục:

  

  

  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 
  

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ụ:

    



  
Căn giữa theo chiều dọc - Sử dụng padding
   
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:

  

    
Website Webafffiliavn
  

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:

• Thẻ span trong HTML
• Thẻ hr trong HTML
• Thẻ i trong HTML