Hướng dẫn html line with text in middle - dòng html với văn bản ở giữa

Question

Tôi đã tạo ra một fiddle sử dụng flexbox và cũng sẽ cung cấp cho bạn các kiểu nhân sự khác nhau (đường đôi, các ký hiệu ở giữa đường, thả bóng, inset, dashed, v.v.).

Nội dung chính Show

Sử dụng các thẻ
Sử dụng thuộc tính bảng kiểu
Tập trung một vài khối văn bản
Nhiều khối văn bản

CSS

button {
    padding: 8px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 2px;
  }

  button:hover {
    cursor: pointer;
  }

  button.active {
    background-color: rgb(34, 179, 247);
    color: #fff;
  }

  .codeBlock {
    display: none;
  }

  .htmlCode, .cssCode {
    background-color: rgba(34, 179, 247, 0.5); 
    width: 100%;
    padding: 10px;
  }

  .divider {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    width: 100%;
  }

  .divider.fixed {
    width: 400px;
  }

  .divider > label {
    align-self: baseline;
    flex-grow: 2;
    white-space: nowrap;
  }

  .divider > hr {
    margin-top: 10px;
    width: 100%;
    border: 0;
    height: 1px;
    background: #666;
  }

  .divider.left > label {
    order: 1;
    padding-right: 5px;
  }

  .divider.left > hr {
    order: 2
  }

  .divider.right > label {
    padding-left: 5px;
  }
  /* hr bars with centered text */
  /* first HR in a centered version */

  .divider.center >:first-child {
    margin-right: 5px;
  }
  /* second HR in a centered version */

  .divider.center >:last-child {
    margin-left: 5px;
  }
  /** HR style variations **/

  hr.gradient {
    background: transparent;
    background-image: linear-gradient(to right, #f00, #333, #f00);
  }

  hr.gradient2 {
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }

  hr.dashed {
    background: transparent;
    border: 0;
    border-top: 1px dashed #666;
  }

  hr.dropshadow {
    background: transparent;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
  }

  hr.blur {
    background: transparent;
    border: 0;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px black;
  }

  hr.blur:after {
    background: transparent;
    /* Not really supposed to work, but does */
    content: "\00a0";
    /* Prevent margin collapse */
  }

  hr.inset {
    background: transparent;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  hr.flared {
    background: transparent;
    overflow: visible;
    /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
  }

  hr.flared:before {
    background: transparent;
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
  }

  hr.double {
    background: transparent;
    overflow: visible;
    /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
  }

  hr.double:after {
    background: transparent;
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
  }

HTML


  
  Welcome!

 

  
  Welcome!

 

  
  Welcome!
  

 

  
  Welcome!

 

  
  Welcome!

 

  
  Welcome!

Hoặc đây là một fiddle tương tác: http://jsfiddle.net/mpyszenj/439/

Cập nhật: ngày 30/12/2021 bởi12/30/2021 by

Hướng dẫn html line with text in middle - dòng html với văn bản ở giữa

Văn bản tập trung thường được sử dụng cho một tiêu đề của một trang web hoặc tài liệu. Để trung tâm bằng văn bản bằng HTML, bạn có thể sử dụng thẻ hoặc sử dụng thuộc tính CSS. Để tiến hành, chọn tùy chọn bạn thích và làm theo hướng dẫn.

tag or use a CSS property. To proceed, select the option you prefer and follow the instructions.

Sử dụng các thẻ

Một cách để trung tâm văn bản hoặc đặt nó ở giữa trang là đặt nó trong các thẻ.

Center this text!

Chèn văn bản này trong mã HTML sẽ mang lại kết quả sau:

Trung tâm văn bản này!

Ghi chú

Thẻ hiện được coi là không dùng nữa. Mặc dù nó vẫn có thể hoạt động, nhưng nó dự kiến sẽ được loại bỏ để sử dụng CSS. Chúng tôi khuyên bạn nên sử dụng phương thức biểu định kiểu (hiển thị bên dưới) để văn bản trung tâm trong HTML.

tag is now considered deprecated. Although it may still work, it's expected to be removed in favor of using CSS. We recommend you use the style sheet method (shown below) to center text in HTML.

Sử dụng thuộc tính bảng kiểu

Bạn có thể tập trung văn bản của một trang web với CSS bằng cách chỉ định thuộc tính căn chỉnh văn bản của phần tử được tập trung.text-align property of the element to be centered.

Tập trung một vài khối văn bản

Nếu bạn chỉ có một hoặc một vài khối văn bản vào trung tâm, hãy thêm thuộc tính kiểu vào thẻ mở của phần tử và sử dụng thuộc tính "văn bản-align". Trong ví dụ dưới đây, chúng tôi đã thêm chúng vào thẻ.

Center this text!

Thuộc tính "văn bản-align" được đặt thành "trung tâm" để chỉ ra phần tử được tập trung ở giữa trang hoặc chứa div.

Nhiều khối văn bản

Nếu bạn có nhiều khối văn bản đến trung tâm, hãy sử dụng CSS bên trong các thẻ trong phần đầu hoặc trong một bảng kiểu bên ngoài. Xem mã ví dụ bên dưới để biết cách đặt tất cả văn bản bên trong các thẻ được tập trung.

Văn bản trong mỗi bộ thẻ được tập trung trên trang. Nếu bạn muốn một số đoạn văn tập trung, trong khi những đoạn khác thì không, bạn có thể tạo một lớp kiểu, như được thấy trong mã bên dưới.

Nếu bạn đang tạo một lớp trung tâm, như được hiển thị trong ví dụ trên, một đoạn văn có thể được tập trung bằng cách sử dụng mã bên dưới, trong đó "gọi" lớp trung tâm.

Center this text!

Mẹo

Khi một lớp được tạo, nó có thể được áp dụng cho bất kỳ thẻ HTML nào chứa các từ, hình ảnh và hầu hết các yếu tố khác. Ví dụ: nếu bạn muốn tiêu đề được tập trung, bạn có thể thêm class = "centre" vào thẻ hoặc thẻ tiêu đề khác.class="center" to the

tag or another heading tag.

programming html Create line CSS Hr HTML Hr html mdn Hr CSS Divider HTML

Hướng dẫn html line with text in middle - dòng html với văn bản ở giữa

Sử dụng các thẻ

Sử dụng thuộc tính bảng kiểu

Tập trung một vài khối văn bản

Nhiều khối văn bản

tag or another heading tag.

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội