programming css

Căn chỉnh văn bản css

- Thuộc tính text-align dùng để "canh lề theo chiều ngang" cho văn bản bên trong phần tử. text-align used to "canh biên theo chiều ngang" cho văn bản bên trong phần tử

- Ví dụ

Trong phần tử bên dưới, văn bản được canh bên trái

- Lập Trình Web

Trong phần tử bên dưới, văn bản được canh giữa

- Lập Trình Web

Trong phần tử bên dưới, văn bản được canh giữa

- Lập Trình Web

Trong phần tử bên dưới, văn bản được canh giữa

Trong phần tử bên dưới, văn bản được canh bên phải

Trong phần tử bên dưới, văn bản được canh đều hai bên trái & phải. text-align không chỉ dùng để canh lề cho văn bản, mà nó còn có thể dùng để canh lề cho hầu hết các loại nội dung bên trong phần tử, ví dụ

- HTML là ngôn ngữ đầu tiên mà một nhà thiết kế web phải học. HTML được sử dụng để tạo ra các nội dung cho trang web, ví dụ như. hình ảnh, âm thanh, video, các liên kết, các đoạn văn bản,. HTML cực kỳ dễ học. Đồng thời, chúng tôi xin giới thiệu đến các bạn hàng loạt Tài liệu hướng dẫn học HTML đã được biên soạn kỹ lưỡng theo trình tự từ cơ bản đến nâng cao kèm theo nhiều ví dụ minh họa đơn giản dễ hiểu. Hứa hẹn sẽ giúp bạn đọc dễ dàng tiếp thu ngôn ngữ HTML trong thời gian ngắn nhất với khối lượng kiến thức đầy đủ nhất

link demo ở đây. https. //jsfiddle. net/1qxh934q/1/

1. 2 Nó là block kiểu phần tử

Để căn cứ giữa ta để lề-trái và lề-phải là tự động, nó sẽ tự động căn đều hai bên
Và tất nhiên phần tử đó phải có chiều rộng cụ thể và nhỏ hơn cha của nó. còn nếu nó là full-width[ width=100%] thì bạn sẽ không căn giữa được nó nữa

  margin: 0 auto;

ví dụ 2

   
      
        Is it a block level element?

  .block-center {
    width: 300px; // cho width 1 giá trị nhất định
    background: red;
    color: white;
    margin: 0 auto  // căn giữa 
    padding: 10px;
  }

xem kết quả qua hình ảnh sau

link demo ở đây. https. //jsfiddle. net/1qxh934q/2/

1. 3 Căn giữa cho nhiều phần tử kiểu khối

Nếu bạn có 2 hoặc nhiều hơn khối phần tử và cần căn cứ giữa chúng theo chiều ngang[chiều ngang] trên nhiều dòng[hàng]. Thì chúng ta vẫn kiểu bình thường cho từng khối phần tử
ví dụ 2


      
        Is it a block level element?
      
      
        Is it a block level element?
      
      
        Is it a block level element?

 .block-center {
    margin: 10px auto;
    width: 300px;
    background: red;
    color: white;
    padding: 10px;
  }

kết quả như hình ảnh dưới đây

Nếu bạn có 2 hoặc nhiều hơn khối phần tử và cần căn cứ giữa chúng theo chiều ngang[chiều ngang] trên cùng 1 dòng[hàng]. Thì chúng ta style các phần tử đó sang dạng inline-* hoặc sử dụng flexbox
Resume ví dụ dưới đây. is example 2 only style # when to inline format

.block-center {
    max-width: 200px;
    background: red;
    color: white;
    padding: 10px;
    display: inline-block;
    margin: 5px 0;
  }
  #content {
    text-align: center;
  }

kết quả như hình ảnh dưới đây

Resume ví dụ dưới đây. vẫn là ví dụ 2 only style # khi sang dạng flexbox ta ko dùng inline-block nữa

    text-align: center;

kết quả như hình ảnh dưới đây

With the bottom between the vertical vertical thì nó sẽ phức tạp hơn

2. 1 It is inline and inline-* [as text or link]

a. It is a line

With this type ta only need padding on bottom = nhau là xong

     this is paragraph

see after

     this is paragraph

     this is paragraph

kết quả ta thu được như hình ảnh

Như demo ở link sau. https. //jsfiddle. net/1qxh934q/8/

Vì 1 lý do nào đó mà sử dụng padding mà vẫn không được và bạn biết chắc chắn rằng phần tử đó sẽ không xuống dòng nên bạn có thể sử dụng line-height và white-space. nowrap as after

     this is paragraph

kết quả thu được như hình ảnh bên dưới

b. It is many lines

Sử dụng padding-top, padding-bottom để căn giữa cho nhiều dòng. Nhưng đôi khi sử dụng nó không được vì đoạn văn bản đó đang nằm trong ô bảng. Ta sẽ sử dụng vertical-align cho công việc giữa