7

Estoy tratando de crear dos bordes una a la izquierda y otra a la derecha y el texto principal quede en el medio de los dos bordes.

Un ejemplo a la idea a lo que estoy tratando de lograr he subido dos imágenes de muestra.

Traté realizando de esta manera pero las dos lineas se juntan.

    <div class="www">

      <h4><span class="lineseparator"></span>
        TITLE NOT TITLE
        <span class="lineseparator"></span>
      </h4>

      <p>Content and content and contecnt</p>
    </div>

Intenté de esta otra forma pero el mismo problema.

    <div class="www">
      <span class="lineseparator"></span>
      <h4>TITLE NOT TITLE</h4>
      <span class="lineseparator"></span>
      <p>Content and content and contecnt</p>
    </div>

Ejecución:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 13px;
  font-family: 'OpenSans', 'cursive', 'Releway', Roboto, Lato, Utsaah;
  background-color: #FBFBFB;
}
.www {
  position: relative;
  padding-top: 35px;
}
.lineseparator {
height: 1px;
border-top: 1px solid #000;
display: block;
position: relative;
top: 12px;
width: 20%;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

p {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
}
    <div class="www">
      <span class="lineseparator"></span>
      <h4>TITLE NOT TITLE</h4>
      <span class="lineseparator"></span>
      <p>Content and content and contecnt</p>
    </div>

<br><br><br>
    <div class="www">
      
      <h4><span class="lineseparator"></span>
        TITLE NOT TITLE
        <span class="lineseparator"></span>
      </h4>
      
      <p>Content and content and contecnt</p>
    </div>

Lo que deseo lograr es lo siguiente el ejemplo lo tome de un sitio web. introducir la descripción de la imagen aquí

Y que al hacer responsive se adapte de la siguiente manera. introducir la descripción de la imagen aquí

4 respuestas 4

3

Prueba lo siguiente:

.in-middle {
  width: 100%;
  height: 20px;
  border-bottom: 1px solid black;
  text-align: center;
}

.tittle-pad-size {
  font-size: 40px;
  background-color: #ffffff;
  padding: 0 10px;
}
<div class="in-middle">
  <span class="tittle-pad-size">What you get?</span>
</div>

<div class="www">
  <p>Course for all!</p>
</div>

1

Otro modo de hacerlo sería usando los pseudo-elementos ::before y ::after junto con Flexbox. Este método es (o al menos me parece) bastante interesante porque no hacen falta etiquetas adicionales, sólo con el h4 ya funcionará.

La idea es:

  • Añade display:flex al encabezado.
  • Añade los dos pseudo-elementos ::before y ::after vacíos con un borde superior.
  • Ponle flex:1 a los pseudo-elementos para que ocupen todo el espacio disponible.
  • Usa transformaciones para desplazar los pseudo-elementos un 50% del alto.

Y aquí lo puedes ver funcionando:

h4 {
  display:flex;
}

h4::before, h4::after {
  content:"";
  flex:1;
  border-top:1px solid #cccccc;
  margin:0px 10px;
  transform:translateY(50%)
}
<h4>TÍTULO CON BORDES LATERALES</h4>

1
  • Hola @AlvaroMontoro es perfecto todos los ejemplos que me has indicado funciona perfectamente sin problemas al igual que a ti a mi también me parece muy interesante esta forma más que todo por las pocas líneas de código y más aún porque en el código fuente de la imagen también utilizaba ´flex´ pero creo que no lo copie bien o no lo supe imitar a pesar de observar el código pero fantástico el ejemplo gracias :)
    – May
    Commented el 4 jun. 2017 a las 16:58
1

Lo que quieres hacer se puede hacer de diferentes maneras. Un modo sencillo sería por ejemplo usando un pseudo-elemento ::after para hacer la línea horizontal, y luego superponer el texto con un span que tenga el mismo fondo que el de la página.

Algo como esto:

h4 {
  text-align: center;
  position:relative;
}

h4 span {
   background: white;
   position:relative;
   z-index:1;
   padding:0px 10px;
}

h4::after {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  border-bottom:1px solid #dddddd;
  z-index:0;
}
<h4>
  <span>TÍTULO DE SECCIÓN</span>
</h4>

-1

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    /*
    * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 13px;
  font-family: 'OpenSans', 'cursive', 'Releway', Roboto, Lato, Utsaah;
  background-color: #FBFBFB;
}/*
.www {
  position: relative;
  padding-top: 35px;
}
.lineseparator {
height: 1px;
border-top: 1px solid #000;
display: block;
position: relative;
top: 12px;
width: 20%;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

p {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
}*/


.primero{
  border-left:4px red solid;
  </style>

</head>
<body>
<!--
 <div class="www">
      <span class="lineseparator"></span>
      <h4>TITLE NOT TITLE</h4>
      <span class="lineseparator"></span>
      <p>Content and content and contecnt</p>
    </div>

<br><br><br>
    <div class="www">
      
      <h4><span class="lineseparator"></span>
        TITLE NOT TITLE
        <span class="lineseparator"></span>
      </h4>
      
      <p>Content and content and contecnt</p>
    </div>-->


<CENTER>
    <div class="primero">
    <h3>TITULO</h3>
    <P>INFORMACION BLABLABLA</P>

      
    </div>
</body>
</html>

Algo asi pero curviada?

1
  • 2
    Esta respuesta puede ser correcta, pero sin ningún tipo de explicación no creo que sea demasiado útil.
    – fedorqui
    Commented el 1 jun. 2017 a las 7:47

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.