CSS vẽ đường ngang ở giữa div

Với loại sự việc này, điều quan trọng là phải xem xét kết quả cuối cùng mà bạn đang theo đuổi. Nếu sắp có các cột văn bản hoặc thậm chí là một lưới các hộp, tốt hơn hết bạn nên sử dụng các vùng chứa cho các cột hoặc ô đó làm phương tiện để thêm các đường thẳng đứng và ngang

Vậy bối cảnh của tất cả những dòng này là gì?

Nếu bạn muốn thay đổi độ dày hoặc chiều cao của đường ngang, hãy thêm thuộc tính chiều cao vào

  
    Title of the document
    
  
  
    Horizontal Line with Height and Background Color
    

  

Đặt thuộc tính đường viền thành "không" để xóa đường viền của đường ngang dày của bạn

  
    Title of the document
    
  
  
    Horizontal Line with Height and Background Color
    

  

Bạn có thể thay đổi màu của đường ngang bằng cách đặt thuộc tính border-top và xác định màu. Làm theo ví dụ để xem minh họa về nó

  
    Title of the document
    
  
  
    Horizontal Line with Height and Background Color
    

  

Đi xa hơn với các đường ngang bằng cách tạo các kiểu khác nhau cho

  
    Title of the document
    
  
  
    
Gradient Horizontal Line
    

    
Gradient Transparent
    

    
Single-direction Drop Shadow
    

    
Double
    

    
Dashed
    

    
Dotted
    

    
Rounded Corners
    

    

  

Nếu bạn muốn đặt hình trang trí hoặc hình ảnh làm quy tắc ngang cho trang web của mình, bạn có thể thêm hình nền vào quy tắc ngang của mình với sự trợ giúp của thuộc tính nền CSS. Ngoài ra, hãy đặt chiều cao bằng với chiều cao của hình ảnh của bạn (hoặc phần bạn muốn từ hình ảnh) và đường viền. không, vì vậy hình ảnh của bạn sẽ giống như một đường kẻ ngang

Bài viết này sẽ hướng dẫn các bạn cách thêm đường kẻ ngang vào bên phải và bên trái văn bản như hình bên dưới

nếu bận){

} khác {

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

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

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

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

Chúng ta sẽ sử dụng phần tử giả CSS :before để thêm một dòng vào 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ừ đoạn mã trên, chúng tôi đang tạo một phần tử mới có chiều cao là

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

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

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

3. Đặt hr-lines thành tương đối

Để các phần 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 tương đối, điều này sẽ làm cho tất cả các chuyển động của :before và

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

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

.hr-lines{
  position: relative;
}

kết quả đầu ra

Chúng ta có thể khắc phục điều này bằng cách đặt

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

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

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

Chúng tôi đang đặt :before ở bên trái của văn bản bằng cách đặt

.hr-lines{
  position: relative;
}

4. Thêm dòng bên phải

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

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

Thêm các dòng mã sau vào tệp CSS của bạn để thêm đúng dòng 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

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

.hr-lines{
  position: relative;
}

Kết quả cuối cùng

}

Mã hoàn chỉnh

.hr-lines{
  position: relative;
}

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

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

.hr-lines{
  position: relative;
}

.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;
}

kết thúc

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

Chà, thật là một hành trình, tôi rất vui vì bạn đã đi đế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 @chúbigbay143
• 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 ủng hộ blog của tôi, bạn cũng có thể mua cho tôi một ly cà phê bên dưới, blog của tôi sống nhờ cà phê 🙏