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

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

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/

Đăng ký nhận bản tin của tôi và không bao giờ bỏ lỡ các bài viết sắp tới của tôi

Bài viết này sẽ hướng dẫn bạn cách thêm một đường ngang ở bên phải và bên trái của một văn bản như hình dưới đây:

nếu bận){

Nhảy để hoàn thành mã!

} khác {

1. Tạo thẻ văn bản HTML.

Trong tệp HTML của bạn, hãy tạo thẻ h2 và đặt cho nó một tên lớp là

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

0

<h2 class="hr-lines">PEACE</h2>

2. Thêm dòng bên trái

Chúng tôi sẽ sử dụng phần tử giả CSS

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

1 để thêm một dòng vào phía bên trái của văn bản. Áp dụng mã bên dưới vào tệp CSS của bạn:

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

Từ mã trên, chúng tôi đang tạo một phần tử mới có chiều cao

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

2 và chiều rộng

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

3 trước phần tử

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

0 bằng cách sử dụng thuộc tính Nội dung, sau đó cho nó một vị trí tuyệt đối để di chuyển nó xung quanh, chúng tôi đặt đầu trên

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

5 để Làm cho nó phù hợp với văn bản ở giữa.

3. Đặt

---

Welcome!

 

---

Welcome!

 

---

Welcome!

---

 

---

Welcome!

 

---

Welcome!

 

---

Welcome!

---

0 thành tương đối

Để các yếu tố giả được áp dụng cho phần tử đích, chúng ta phải đặt vị trí của phần tử thành người thân, điều này sẽ làm cho tất cả chuyển động của

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

1 và

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

8 có liên quan đến cha mẹ (văn bản).

Thêm các dòng sau vào các tệp CSS của bạn.

.hr-lines{
  position: relative;
}

Kết quả đầu ra

Chúng ta có thể sửa lỗi này bằng cách đặt

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

9 và thêm

<h2 class="hr-lines">PEACE</h2>

0 vào phần tử.

.hr-lines{
  position: relative;
  /*  new lines  */
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}

Chúng tôi đang đặt

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

1 ở phía bên trái của văn bản bằng cách đặt

<h2 class="hr-lines">PEACE</h2>

2.

4. Thêm đúng dòng

Chúng tôi sẽ sử dụng phần tử giả

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

8 để thêm đúng dòng.

Thêm các dòng mã sau vào tệp CSS của bạn để thêm dòng phù hợp vào văn bản.

.hr-lines:after{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}

Chúng tôi đang đặt

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  


 

  

  Welcome!

 

  

  Welcome!

 

  

  Welcome!
  

8 ở phía bên phải của văn bản bằng cách đặt

<h2 class="hr-lines">PEACE</h2>

5.

Đầu ra cuối cùng:

}

---

Mã hoàn chỉnh

<h2 class="hr-lines">PEACE</h2>

6

<h2 class="hr-lines"> PEACE </h2>

<section>
  <div>
    <p>I wish for peace in Russia & Ukraine</p>
  </div>
<section>

<h2 class="hr-lines">PEACE</h2>

7

.hr-lines{
  position: relative;
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}

.hr-lines:before{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
}

.hr-lines:after{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}

p{
  text-transform: uppercase;
  color: red;
}

section{
  display: flex;
  justify-content: center;
  align-items:center;
  gap: 1rem;

}

div{
  width: 500px;
    border: 1px solid #ccc;
  padding: 10px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
}

Gói lên

Tôi hy vọng rằng bài viết này sẽ hỗ trợ bạn trong việc tạo một văn bản với các dòng bên phải và bên trái nằm ngang tại một số điểm trong tương lai.

---

Wow, thật là một hành trình, tôi rất vui vì bạn đã làm cho đến cuối bài viết này, nếu bạn thích và học được điều gì đó mới từ bài viết này, tôi sẽ muốn kết nối với bạn.

Hãy kết nối trên

• Twitter @Unclebigbay143
• LinkedIn @unclebigbay

---

---

Hẹn gặp lại các bạn trong bài viết tiếp theo. Tạm biệt 🙋‍♂

Nếu bạn thấy nội dung của tôi hữu ích và muốn hỗ trợ blog của tôi, bạn cũng có thể mua cho tôi một ly cà phê dưới đây, blog của tôi sống trên cà phê.