CSS <HR> Với trang trí

Question

Tôi đã vật lộn với thứ gì đó theo lý thuyết nên rất đơn giản trong vài ngày nay ... và tôi quyết tâm không từ bỏ.

Tôi cố gắng để đạt được điều này:

quy tắc cơ bản nằm ngang, với một vật trang trí giữa - HR sẽ kéo dài toàn bộ chiều rộng của màn hình.

Vì vậy, tôi đã cắt lát PSD của mình để thả hình trang trí dưới dạng hình ảnh - và tôi đang cố phủ lớp này lên một mức trung tâm

---

nhưng không thành công.

Markup của tôi:

<div> 
    <hr> 
    <img src='assets/img/ornament.png' class='center'> 
</div> 

CSS:

hr{ 

height: 2px; 
color: #578daf; 
background-color: #578daf; 
border:0; 

}

Tôi chỉ con số không thể hiểu làm thế nào để làm cho hình ảnh xuất hiện ở trung tâm của HR .... Bất kỳ giúp đỡ hoặc con trỏ sẽ được đánh giá cao.

Answer 1

Thay đổi tp đánh dấu

<div class='hr'> 
    <hr> 
    <img src='assets/img/ornament.png' alt=''> 
</div> 

Thêm dòng sau vào các kiểu, thay thế 16px bởi một giá trị phù hợp mà phụ thuộc vào chiều cao của hình ảnh và cỡ chữ mong đợi.

.hr { text-align: center; } 
.hr img { position: relative; top: -16px; } 

Tuy nhiên, cách tiếp cận tốt hơn là chỉ sử dụng hình ảnh ở giữa có hình ảnh nền lặp lại theo chiều ngang. Hình nền sẽ là một phần có cùng màu với nền trang tổng thể nhưng có một đường ngang ở giữa.

Answer 2

Khám phá this fiddle. Bạn có thể đặt hình ảnh trang trí làm nền trên div với lớp ornament.

Answer 3

off the cuff ... bằng cách sử dụng hình ảnh trung tâm cho giờ và một đoạn thẳng lặp đi lặp lại cho div ...

<style> 
     .line hr {height: 16px; background: url(as_image.jpg) center center no-repeat;border:0;} 
     .line {background: url(as_line.jpg) center repeat-x;} 
    </style> 

    <div class="line"><hr></div> 

Answer 4

Bạn cũng có thể thực hiện điều này với một yếu tố CSS pseudo. Tất cả những gì cần thiết cho HTML là <hr>

hr:after { 
    background: url('yourimagehere.png') no-repeat top center; 
    content: ""; 
    display: block; 
    height: 30px; /* height of the ornament */ 
    position: relative; 
    top: -15px; /* half the height of the ornament */ 
}