programming html

Html dòng màu đen

Mọi người kêu la tại sao giữa CSS nó lại khó khăn như vậy?. Tôi nghĩ rằng vấn đề không phải là rất khó để làm, có rất nhiều cách khác nhau để làm điều đó, tùy thuộc vào tình hình. Chúng ta sẽ chia nhỏ nó ra và hi vọng nó sẽ dễ dàng hơn

1. Horizontally[ Căn giữa theo chiều ngang]

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

Bạn có thể căn chỉnh các phần tử nội tuyến theo chiều ngang, ở trong 1 phần tử cha kiểu khối ta chỉ cần kiểu như sau

    text-align: center;

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

     this is paragraph

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

and results ta was as the image after

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

Liên kết demo. https. //jsfiddle. net/1qxh934q/3/

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

________số 8

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

liên kết demo. https. //jsfiddle. net/1qxh934q/4/

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

.block-center {
    max-width: 200px;
    background: red;
    color: white;
    padding: 10px;
    margin: 5px;
  }
  #content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

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

liên kết demo. https. //jsfiddle. net/1qxh934q/5/

2. Vertically [ theo chiều dọc]

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

liên kết demo. https. //jsfiddle. net/1qxh934q/9/

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