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

    <p> this is paragraph p>

    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

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

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

 .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

    <p> this is paragraph p>

0

see after

    <p> this is paragraph p>

1

    <p> this is paragraph p>

2

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

    <p> this is paragraph p>

3

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