0

estoy aquí y parecerá tontería pero necesito crear este parrafo en html y no se como poner las lineas horizontales. Lo hice con <hr pero no podia cambiarle el color directamente, intente con un border-color pero no queda en el centro. introducir la descripción de la imagen aquí

Este es el codigo que he hecho

<div>
  <hr class="hr-smashing">
                            <p>
                                OTHER SMASHING OFFERS
                            </p>
                            <hr class="hr-smashing">
</div>
.smashing-offers caption p {
    font-size: 2.2rem;
    letter-spacing: 1.63px;
    color: #1BB286;
    font-weight: bold;
    display: inline-block;
    margin: 0 1.5rem;
}
.hr-smashing {
    width: 30%;
    display: inline-block;
    border: 1px solid #1BB286;
    color: #1BB286;
}

Muchas gracias por su ayuda.

1

2 respuestas 2

2

Buen Día.

Según los datos de tú pregunta la respuesta la tienes aquí:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linea Central con CSS</title>
    <style>
        .hrLinea{
            vertical-align: middle;
            width: 30%;
            display: inline-block;
            border: 1px solid #1BB286; 
        }
    </style>
</head>
<body>
    <div>
        <hr class="hrLinea"> OTHER SMASHING OFFERS <hr class="hrLinea">
    </div>
      
</body>
</html>

Solo te estaba faltando el centrado vertical:

vertical-align: middle;

El resultado es este:

Con borde de 1px

IMPORTANTE: Si vas a colocar el ancho del borde de la línea mayor a 3px deberás a comenzar a equilibrar con el margen de la base, por ejemplo:

border: 8px solid #1BB286; 
margin-bottom: 12px;

El resultado sería este: Con borde de 8px

Me tomé el atrevimiento de modificar la forma de presentar los elementos en el HTML y quitar el CSS que sobra.

0

Una solución puede ser ésta:

<div class="box">
<p>OTHER SMASHING OFFERS</p>
</div>
<styles>
.box{
position: relative;
}

.box:after{
content :'';
position: absolute;
width: 100%;
height:2px;
background: black;
top:50%;
left: 0;
z-index:-1
}
.box p{
 position: relative;
   background: white;
   width: fit-content;
   margin:0 auto;
   padding: 14px
}
</styles>

Espero que te sirva

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.