Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản

Aligning text in CSS can be achieved using the





Align Text


Align Text

Text-Align

text-align:left
text-align:center
text-align:right
text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

Vertical Align

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: bottom
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: middle
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: top
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: text-bottom
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: baseline
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: text-top
vertical-align: sub
vertical-align: super
2 property or the




Align Text


Align Text

Text-Align

text-align:left
text-align:center
text-align:right
text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

Vertical Align

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: bottom
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: middle
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: top
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: text-bottom
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: baseline
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: text-top
vertical-align: sub
vertical-align: super
3 property.

  1. The
    
    
    
    
    Align Text
    
    
    

    Align Text

    Text-Align

    text-align:left
    text-align:center
    text-align:right
    text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

    Vertical Align

    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: bottom
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: middle
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: top
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: text-bottom
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: baseline
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: text-top
    vertical-align: sub
    vertical-align: super
    2 property is used to specify how inline content should be aligned within a block. For example:
    The values are:
    • 
      
      
      
      Align Text
      
      
      

      Align Text

      Text-Align

      text-align:left
      text-align:center
      text-align:right
      text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

      Vertical Align

      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: bottom
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: middle
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: top
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: text-bottom
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: baseline
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: text-top
      vertical-align: sub
      vertical-align: super
      5
    • 
      
      
      
      Align Text
      
      
      

      Align Text

      Text-Align

      text-align:left
      text-align:center
      text-align:right
      text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

      Vertical Align

      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: bottom
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: middle
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: top
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: text-bottom
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: baseline
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: text-top
      vertical-align: sub
      vertical-align: super
      6
    • 
      
      
      
      Align Text
      
      
      

      Align Text

      Text-Align

      text-align:left
      text-align:center
      text-align:right
      text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

      Vertical Align

      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: bottom
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: middle
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: top
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: text-bottom
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: baseline
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: text-top
      vertical-align: sub
      vertical-align: super
      7
    • 
      
      
      
      Align Text
      
      
      

      Align Text

      Text-Align

      text-align:left
      text-align:center
      text-align:right
      text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

      Vertical Align

      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: bottom
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: middle
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: top
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: text-bottom
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: baseline
      Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
      vertical-align: text-top
      vertical-align: sub
      vertical-align: super
      8
  2. The
    
    
    
    
    Align Text
    
    
    

    Align Text

    Text-Align

    text-align:left
    text-align:center
    text-align:right
    text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

    Vertical Align

    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: bottom
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: middle
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: top
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: text-bottom
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: baseline
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: text-top
    vertical-align: sub
    vertical-align: super
    3 property is used to indicate how inline content should be aligned vertically relative to sibling inline content. For example:
    style="vertical-align: text-bottom;
    The values are:
    •     text-align: center;
      
      0
    •     text-align: center;
      
      1
    •     text-align: center;
      
      2
    •     text-align: center;
      
      3
    •     text-align: center;
      
      4
    •     text-align: center;
      
      5
    •     text-align: center;
      
      6
    •     text-align: center;
      
      7
  3. The following code sample shows these properties in use:

    
    
    
    
    Align Text
    
    
    

    Align Text

    Text-Align

    text-align:left
    text-align:center
    text-align:right
    text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

    Vertical Align

    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: bottom
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: middle
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: top
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: text-bottom
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: baseline
    Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
    vertical-align: text-top
    vertical-align: sub
    vertical-align: super

The above code will render the following:

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản

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/

    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 :

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản

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 :

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản

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>
style="vertical-align: text-bottom;
0

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
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
style="vertical-align: text-bottom;
1

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
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
style="vertical-align: text-bottom;
2

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
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
style="vertical-align: text-bottom;
3

xem vi dụ sau:

style="vertical-align: text-bottom;
4
style="vertical-align: text-bottom;
5

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản

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:
style="vertical-align: text-bottom;
6

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
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:

style="vertical-align: text-bottom;
7
style="vertical-align: text-bottom;
8

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản

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)
style="vertical-align: text-bottom;
9

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
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.




Align Text


Align Text

Text-Align

text-align:left
text-align:center
text-align:right
text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

Vertical Align

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: bottom
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: middle
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: top
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: text-bottom
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: baseline
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: text-top
vertical-align: sub
vertical-align: super
0

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
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




Align Text


Align Text

Text-Align

text-align:left
text-align:center
text-align:right
text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap text-align:justify - to see the effect of justify, the text block has to wrap

Vertical Align

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: bottom
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: middle
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: top
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: text-bottom
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: baseline
Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản
vertical-align: text-top
vertical-align: sub
vertical-align: super
1

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

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản

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:

Hướng dẫn text-align inline css - css nội tuyến căn chỉnh văn bản

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/