Hướng dẫn text center css - trung tâm văn bản css

• Trang chủ
• Tham khảo
• CSS
• Thuộc tính text-align

Định nghĩa và sử dụng

Thuộc tính text-align sắp xếp các nội dung theo chiều ngang.

Cấu trúc

tag {
    text-align: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
text-align	left	text-align: left;	Sắp nội dung theo chiều ngang nằm về bên trái, đây là dạng mặc định.
right	text-align: right;	Sắp nội dung theo chiều ngang nằm về bên phải.
center	text-align: center;	Sắp nội dung theo chiều ngang nằm giữa.
justify	text-align: justify;	Sắp xếp nội dung cho các dòng có chiều rộng bằng nhau.
inherit	text-align: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

HTML viết:

Canh trái
Canh giữa
Canh phải

Hiển thị trình duyệt khi chưa có CSS:

Canh trái

Canh giữa

Canh phải

CSS viết:

p.alignLeft {
    text-align: left;
}

p.alignCenter {
    text-align: center;
}

p.alignRight {
    text-align: right;
}

Hiển thị trình duyệt khi có CSS:

Canh trái

Canh giữa

Canh phải

CSS viết:

Hiển thị trình duyệt khi có CSS:

Trình duyệt hỗ trợ

link demo cho nó: https://jsfiddle.net/1qxh934q/15/

1.Horizontally( Căn giữa theo chiều ngang)

1.1 Nó là inline và inline-* (như text hoặc link)

Bạn có thể căn chỉnh các element inline theo chiều ngang, ở trong 1 phần tử cha kiểu block ta chỉ cần style như sau:

    text-align: center;

các bạn xem qua ví dụ 1:

    <p> this is paragraph p>

    p {
        text-align: center;
        background: blue;
        padding: 10px;
        color: #fff;
    }

và kết quả ta được như hình ảnh sau :

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

1.2 Nó là phần tử kiểu block

• Để căn giữa ta để margin-left và margin-right là auto, nó sẽ tự căn đều hai bên.
• Và tất nhiên phần tử đó phải có width cụ thể và nhỏ hơn cha của nó. còn nếu mà nó full-width( width=100%) thì bạn sẽ ko căn giữa được nó nữa.

  margin: 0 auto;

xét ví dụ 2:

   <div id=content>
      <div class="block-center">
        Is it a block level element?
      div>
  div>

  .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 block

• Nếu bạn có 2 hoặc nhiều hơn phần tử block và cần căn giữa cho chúng theo horizontally( chiều ngang) trên nhiều dòng( row) . Thì chúng ta vẫn style bình thường cho từng phần tử block.

• xét ví dụ 2:

<div id=content>
      <div class="block-center">
        Is it a block level element?
      div>
      <div class="block-center">
        Is it a block level element?
      div>
      <div class="block-center">
        Is it a block level element?
      div>
  div>

Canh trái
Canh giữa
Canh phải

0

kết quả như hình ảnh dưới đây Demo link : https://jsfiddle.net/1qxh934q/3/

Demo link : https://jsfiddle.net/1qxh934q/3/

• Nếu bạn có 2 hoặc nhiều hơn phần tử block và cần căn giữa cho chúng theo horizontally( chiều ngang) trên cùng 1 dòng( row). Thì chúng ta style các phần tử đó sang dạng inline-* hoặc sử dụng flexbox
• Xét ví dụ dưới đây : vẫn ví dụ 2 chỉ style # khi sang dạng inline

Canh trái
Canh giữa
Canh phải

1

kết quả như hình ảnh dưới đây link demo: https://jsfiddle.net/1qxh934q/4/

link demo: https://jsfiddle.net/1qxh934q/4/

• Xét ví dụ dưới đây : vẫn ví dụ 2 chỉ style # khi sang dạng flexbox ta ko dùng inline-block nữa

Canh trái
Canh giữa
Canh phải

2

kết quả như hình ảnh dưới đây link demo: https://jsfiddle.net/1qxh934q/5/

link demo: https://jsfiddle.net/1qxh934q/5/

2. Vertically ( theo chiều dọc)

• Với căn giữa theo chiều dọc thì nó sẽ phức tạp hơn

2.1 Nó là inline và inline-* (như text hoặc link)

a. Nó là một dòng

• Với kiểu này ta chỉ cần padding trên dưới = nhau là xong

Canh trái
Canh giữa
Canh phải

3

xem vi dụ sau:

Canh trái
Canh giữa
Canh phải

4

Canh trái
Canh giữa
Canh phải

5

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à dùng padding mà vẫn không được và bạn biết chắc là phần tử đó sẽ không xuống dòng bạn có thể sử dụng line-height và white-space: nowrap như sau:

Canh trái
Canh giữa
Canh phải

6

kết quả thu được như hình ảnh bên dưới link demo : https://jsfiddle.net/1qxh934q/9/

link demo : https://jsfiddle.net/1qxh934q/9/

b. Nó là nhiều dòng

• 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 text đó đang nằm trong table-cell. Ta sẽ sử dụng vertical-align cho việc căn giữa

• xét ví dụ sau:

Canh trái
Canh giữa
Canh phải

7

Canh trái
Canh giữa
Canh phải

8

kết quả như hình ảnh sau:

link demo : https://jsfiddle.net/1qxh934q/10/

• Nếu những cách trên ko được bạn có thể sử dụng flexbox( cách này chỉ sử dụng khi cha nó có chiều cao định sẵn)

Canh trái
Canh giữa
Canh phải

9

kết quả như hình ảnh sau: xem demo ở link : https://jsfiddle.net/1qxh934q/13/

xem demo ở link : https://jsfiddle.net/1qxh934q/13/

• Nếu cả các cách trên ko được. bạn có thể sử dụng kỹ thuật "ghost element", trong đó một yếu tố bổ sung(before, after) với height là 100% được đặt bên trong nơi chứa nó và văn bản được căn chỉnh theo chiều dọc.

p.alignLeft {
    text-align: left;
}

p.alignCenter {
    text-align: center;
}

p.alignRight {
    text-align: right;
}

0

kết quả như hình ảnh này xem demo ở link : https://jsfiddle.net/1qxh934q/12/

xem demo ở link : https://jsfiddle.net/1qxh934q/12/

2.2 Nó là phần tử kiểu block

a. Bạn biết chiều cao của nó

• Bạn đặt bố của nó là với posititon: relative và nó có posititon: absolute, top: 50% và margin-top: -50% để lùi lên trên cho bằng 1/2 chiều cao của

p.alignLeft {
    text-align: left;
}

p.alignCenter {
    text-align: center;
}

p.alignRight {
    text-align: right;
}

1

Kết quả thu được như hình ảnh này

link demo: https://jsfiddle.net/1qxh934q/14/

b. Bạn không biết chiều cao của nó

• Nó cũng xử lý như cách ở trên thay bằng sử dụng margin-top: -50%; đó ta sử dụng : transform: translateY(-50%)

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

link demo cho nó: https://jsfiddle.net/1qxh934q/15/

Kết luận

• Bài này mình hướng dẫn qua một số cách căn giữa trong css. Vẫn còn rất nhiều cách có thể căn giữa mình sẽ giới thiệu vào bài tiếp theo . Cám ơn đã đọc, sau khi đọc vui lòng để lại comment nhận xét
• Reference : https://css-tricks.com/centering-css-complete-guide/