सीएसएस <HR> आभूषण के साथ

Question

मैं कुछ ऐसे समय से संघर्ष कर रहा हूं जो सिद्धांत में कुछ दिनों के लिए बहुत सरल होना चाहिए ... और मैं हार मानने का दृढ़ संकल्प कर रहा हूं। स्क्रीन की पूरी चौड़ाई अवधि जाएगा मानव संसाधन -,

अनिवार्य रूप से क्षैतिज शासन के बीच एक आभूषण के साथ:

मैं इस लक्ष्य को हासिल करने के लिए कोशिश कर रहा हूँ।

इसलिए मैंने अपने PSD को एक छवि के रूप में आभूषण छोड़ने के लिए कटाई की - और मैं इसे

---

केंद्रित पर खराब करने की कोशिश कर रहा हूं लेकिन बुरी तरह विफल रहा हूं।

मेरे मार्कअप:

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

सीएसएस:

hr{ 

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

}

मैं बस नहीं कर सकते आंकड़ा बाहर कैसे छवि मानव संसाधन के केंद्र में प्रदर्शित करने के लिए .... किसी भी मदद या पॉइंटर्स की सराहना की जाएगी।

Answer 1

बदलें मार्कअप tp

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

स्टाइलशीट के लिए निम्न जोड़ें, एक उपयुक्त मूल्य उस छवि की ऊंचाई और उम्मीद फ़ॉन्ट आकार पर निर्भर करता है के द्वारा 16px की जगह।

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

हालांकि, एक बेहतर दृष्टिकोण सिर्फ एक छवि, एक div तत्व एक उपयुक्त पृष्ठभूमि छवि कि क्षैतिज दोहराता है कि अंदर केंद्र पर उपयोग करने के लिए है। पृष्ठभूमि छवि एक टुकड़ा होगा जो समग्र पृष्ठ पृष्ठभूमि के समान रंग का है लेकिन बीच में क्षैतिज रेखा है।

Answer 2

this fiddle देखें। ornament कक्षा के साथ आप div पर आभूषण छवि को पृष्ठभूमि के रूप में सेट कर सकते हैं।

Answer 3

कफ बंद

... घंटा और 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

तुम भी एक सीएसएस छद्म तत्व के साथ ऐसा कर सकते हैं। एचटीएमएल के लिए जरूरी है कि <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 */ 
}