CSS <HR> con ornamento

Question

Ho dovuto fare i conti con qualcosa che in teoria dovrebbe essere molto semplice per alcuni giorni ... e sono determinato a non mollare.

io sto cercando di realizzare questo:

regola essenzialmente orizzontali, con un ornamento tra - l'HR si estenderà l'intera larghezza dello schermo.

Quindi ho affettato il mio PSD per eliminare l'ornamento come immagine - e sto cercando di sovrapporlo a uno

---

centrato ma fallendo miseramente.

mio Markup:

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

CSS:

hr{ 

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

}

Ho appena figura gergo come fare apparire l'immagine al centro della FC .... Qualsiasi aiuto o suggerimenti sarebbero apprezzati.

Answer 1

Change markup tp

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

Aggiungere il seguente al foglio di stile, sostituendo 16px da un opportuno valore che dipende dall'altezza dell'immagine e la dimensione del carattere previsto.

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

Tuttavia, un approccio migliore è quello di utilizzare solo un'immagine, centrata all'interno di un elemento div che ha un'immagine di sfondo adatto che si ripete orizzontalmente. L'immagine di sfondo sarebbe un pezzo dello stesso colore dello sfondo generale della pagina ma ha una linea orizzontale nel mezzo.

Answer 2

Check out this fiddle. È possibile impostare l'immagine dell'ornamento come sfondo sullo div con la classe ornament.

Answer 3

a braccio ... utilizzando l'immagine centrale per l'ora e un segmento di linea ripetuto per il 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

È inoltre possibile eseguire questa operazione con un elemento CSS pseudo. Tutto ciò che è necessario per l'HTML è lo

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 */ 
}