0

Hola desde hace un rato estoy intentando hacer algo como esto:Título centrado entre líneas con HTML y CSS

Y quisiera que no de dañara con responsive, que el texto se mantenga en el medio y las lineas se vayan achicando según la pantalla, cada vez que lo hago o me funciona mobile pero no desktop o viceversa , les mostraría lo que había hecho pero me moleste y lo borre y prefiero empezar de cero fresco con sus sugerencias

Aqui lo que tengo si ve bien pero cuando vas achicando la pantalla se va deformando y la linea derecha se pone encima del titulo (Por cierto no puedo cambiar el color de mis hr :C

#titulo {
  text-align: center;
}

hr#linea {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgb(60, 9, 9);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.com/libraries/popper.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-3ziFidFTgxJXHMDttyPJKDuTlmxJlwbSkojudK/CkRqKDOmeSbN6KLrGdrBQnT2n" crossorigin="anonymous"></script>
  <title>Pruebas</title>
</head>

<body>

  <div class="container">

    <div class="row" style="background: rgba(128, 128, 128, 0.548); padding: 3rem;">

      <div class="col-5" id="linea">
        <hr>
      </div>

      <div class="col-2" id="titulo">
        <p> TÍTULO</p>
      </div>

      <div class="col-5" id="linea">
        <hr>
      </div>

    </div>

  </div>


</body>

</html>

1
  • 1
    Debes mostrar el código que has intentado usar para que pueda ser una pregunta válida, si no has intentado nada consulta before y after de CSS3 Commented el 21 dic. 2017 a las 14:21

3 respuestas 3

2

Aqui tienes un ejemplo sencillo:

Te explico:

::before crea un pseudo-elemento que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad content. Este elemento se muestra en línea con el texto de forma predeterminada.

Con el titulo se utiliza z-index para superponer uno encima del otro, si no se usa el efecto sera la linea cruzando todo el texto

Y lo demas solo son propiedas css.

h2 {
  font: 33px sans-serif;
  margin-top: 30px;
  text-align: center;
}
h2.linea {
  position: relative;
  z-index: 1;
}
h2.linea:before {
  border-top: 2px solid #fff000;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}
h2.linea span {

  background: #fff;
  padding: 0 15px;
}
<h2 class="linea"><span>Titulo</span></h2>

2
  • muchisimas gracias cuando grande quiero ser como tu :D , no entendi mucho lo que me explicaste jeje :/ Commented el 21 dic. 2017 a las 14:46
  • ¡Enhorabuena! Espero haya servido.
    – Alvarez
    Commented el 21 dic. 2017 a las 14:48
1

si sabes como hacerlo para ambos casos, movil y desktop , en vez de crear un solo estilo esperando que funcione en los dos, utiliza @media para que hagas distintos estilos en dependencia del dispositivo:

/* ---- Móviles en horizontal o tablets en vertical ---- */
@media (min-width: 768px) {
    //aqui dentro el estilo para estos dispositivos
}

/* ---- Tablets en horizontal y escritorios normales  ----  / */
@media (min-width: 1024px) {
  ...
}

y así sucesivamente , define un estilo responsive para una aplicación responsive

2
  • podria pero es muy rebuscado, algo mas general es mejor asi mantengo el codigo mas sencillo pero gracias :D Commented el 21 dic. 2017 a las 14:45
  • Comparto tu opinión @NaotoAmari crear media queries debería ser una ultima opción de tipo correctiva, pero no para estar creando una "versión de css" para cada dispositivo. En proyectos grandes se volvera inmanejable. Commented el 26 dic. 2017 a las 16:37
-1

La idea es agregar una linea de fondo con ::after al elemento en este caso es un h1 y después el span dentro de el superponerlos sobre la linea con z-index mayor al del ::after y listo ya tienes el efecto deseado.

espero te ayude saludos

NOTA: para la próxima pregunta por favor agrega un ejemplo de tu código (No lo elimines) porque así te ayudamos mejor y resuelves el problema en tu mismo código saludos

::after (:after)

El pseudo-elemento CSS ::after coincide con el último hijo virtual del elemento seleccionado. Se usa generalmente para añadir contenido estético a un elemento, usando la propiedad CSS content. Este elemento se muestra en línea con el texto de forma predeterminada.

Sintaxis

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

La notación ::after (con doble símbolo :) fue introducida en CSS 3 para establecer la diferencia entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación :after introducida en CSS 2.


::before (:before)

::before crea un pseudo-elemento que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad content. Este elemento se muestra en línea con el texto de forma predeterminada.

Sintaxis

/* CSS3 syntax */
::before

/* CSS2 syntax */ :before

La notación ::before (con dos símbolos :) fue introducida en CSS3 para establecer la diferencia entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación :before, introducida en CSS 2.

Ejemplo Funcional

h1 {
  text-align: center;
  position:relative;
}
h1 span {
background:#fff;
z-index:100;
position:relative;
padding:15px;
}
h1::after  {
  content: '';
  position: absolute;
  width:100%;
  height:2px;
  left:0px;
  top:50%;
  background: rgb(217, 232, 49);
  z-index:50;
}

p {
  border:1px solid #000;
  padding:20px;
}
<h1><span>Titulo</span></h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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.