Skip to main content
Se remplaza código por snippet
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

Como hacer esto Centrar entre líneas con htmlHTML y css o que recomiendanCSS

Hola desde hace un rato estoy intentando hacer algo como esto:introducir la descripción de la imagen aquíTítulo centrado entre líneas con HTML y CSS

<!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://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>
    <style>
        #titulo {
            text-align: center;
        }
        hr#linea {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgb(60, 9, 9); 
        }
    </style>
    <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>

#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>

Como hacer esto con html y css o que recomiendan

Hola desde hace un rato estoy intentando hacer algo como esto:introducir la descripción de la imagen aquí

<!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://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>
    <style>
        #titulo {
            text-align: center;
        }
        hr#linea {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgb(60, 9, 9); 
        }
    </style>
    <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>

Centrar entre líneas con HTML y CSS

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

#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>

mejoras de formato
Origen Enlace
Naoto Amari
  • 313
  • 1
  • 5
  • 18

Hola desde hace un rato estoy intentando hacer algo como esto:introducir la descripción de la imagen aquí

Y quisiera que no de dañara con responsiveresponsive, que el texto se mantenga en el medio y las lineas se vayan achicando segunsegún la pantalla, cada vez que lo hago o me funciona mobilemobile pero no desktopdesktop o viceversa , les mostrariamostraría lo que habiahabí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

<!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://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>
    <style>
        #titulo {
            text-align: center;
        }
        hr#linea {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgb(60, 9, 9); 
        }
    </style>
    <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>

Hola desde hace un rato estoy intentando hacer algo como esto:introducir la descripción de la imagen aquí

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

Hola desde hace un rato estoy intentando hacer algo como esto:introducir la descripción de la imagen aquí

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

<!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://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>
    <style>
        #titulo {
            text-align: center;
        }
        hr#linea {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgb(60, 9, 9); 
        }
    </style>
    <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>
Origen Enlace
Naoto Amari
  • 313
  • 1
  • 5
  • 18

Como hacer esto con html y css o que recomiendan

Hola desde hace un rato estoy intentando hacer algo como esto:introducir la descripción de la imagen aquí

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