CSS <HR> Con el ornamento

Question

He estado luchando con algo que en teoría debería ser muy simple por unos días ... y estoy decidido a no darme por vencido.

estoy tratando de lograr esto:

regla esencialmente horizontal, con un adorno entre - la HR se extenderá a todo el ancho de la pantalla.

Así que corté mi PSD para dejar el ornamento como una imagen, y estoy tratando de superponer esto en un

---

centrado pero que falla miserablemente.

Mi marcado:

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

CSS:

hr{ 

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

}

acabo figura no puede encontrar la manera de hacer que la imagen aparece en el centro de la HR .... Cualquier ayuda o consejos serían apreciados.

Answer 1

Cambiar el TP marcado

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

Añadir lo siguiente a la hoja de estilo, en sustitución de 16px por un valor adecuado que depende de la altura de la imagen y el tamaño de la fuente esperada.

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

Sin embargo, un enfoque mejor es usar sólo una imagen, centrada dentro de un elemento div que tiene una imagen de fondo adecuada que se repite horizontalmente. La imagen de fondo sería una pieza que es del mismo color que el fondo de la página general, pero tiene una línea horizontal en el medio.

Answer 2

Echa un vistazo this fiddle. Puede establecer la imagen del adorno como fondo en el div con la clase ornament.

Answer 3

fruto de la casualidad ... utilizando la imagen del centro de la hr y un segmento de línea, se repetirá el 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

También puede lograr esto con un elemento CSS seudo. Todo lo que se necesita para HTML es <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 */ 
}