1

tengo una fila con una columna de tanaño 12. centre el texto horizontalmente dentro de esta columna pero ahora quiero que este centrado verticalmente en el medio de la pantalla. como podría hacerlo? probé con flexbox para ver si podía centrar la fila pero no me funcionó. alguna idea? la fila se muestra arriba en la barra de navegación.

Mi código es el siguiente:

<div>
  <img src="\assets\img\imag.jpg" class="imagen img-fluid" alt="Imágen responsive">

</div>

<div class="d-flex align-items-center">
  <div class="row"> 
    <div class="col-12 col-md-12 col-sm-12 text-center" id="texto"></div>
  </div>
</div>

Lo que quiero es que lo que muestro con javascript utilizando el id texto se muestre en el centro de la pantalla, con el código que tengo se muestra en la parte superior (en la barra de navegación). Intenté dandole un position: absolute al div que contiene la fila pero no funciona como quiero ya que cuándo redimensiono el tamaño de la ventana no se va adaptando.

1 respuesta 1

1

Para poder alinear los elementos verticalmente dentro de un div tienes que utilizar la propiedad align-items-center y para centrarlos horizontalmente la propiedad justify-content-center. Todo esto funcionará siempre y cuando el div tenga la propiedad d-flex.

Debajo te dejo un ejemplo de cómo utilizar las dos propiedades.

.bd-highlight{
  background-color: grey;
  }
  
  .bd-highlight .p-2{
  background-color: white;
  border: 1px solid black;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<html>
<head>
</head>
  <body>
    <div class="d-flex align-items-center bd-highlight mb-3 text-center justify-content-center" style="height: 100px">
      <div class="p-2 bd-highlight">Flex item</div>
      <div class="p-2 bd-highlight">Flex item</div>
      <div class="p-2 bd-highlight">Flex item</div>
    </div>
    <div class="row">
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUhviFApShZ8FnCeqIuRzyzylRppdbgAPehpBP3pWHD6ooSniq" class="imagen img-fluid col-md-12" alt="Imágen responsive">

     </div>

     <div class="d-flex align-items-center bd-highlight mt-3" style="height: 100px">
        <div class="col-12 col-md-12 col-sm-12 text-center p-2" id="texto">
           <span>AQUÍ VA EL TEXTO</span>
        </div>
    </div>
     <div class="mt-3">
      <div class="row d-flex align-items-center bd-highlight" style="height: 100px">
        <div class="col-12 col-md-12 col-sm-12 text-center p-2" id="texto">
           <span>AQUÍ VA EL TEXTO 2</span>
        </div>
      </div>
    </div>
  </body>
  </html>

5
  • Hola! eso ya lo intenté como mencionas pero no me funciona. se sigue mostrando en la parte superior de la pantalla, no se centra. Edite mi pregunta para que veas el código de esa componente en específico como lo tengo a ver.
    – JulianProg
    el 19 sep. 2018 a las 2:16
  • Al parecer el div con class="row" te estaba anulando la propiedad del flex del hijo. El flex tiene que ir justo delante del div que quieras que tenga esa propiedad. el 19 sep. 2018 a las 6:29
  • Te he puesto dos ejemplos pero para siempre sobra un div el 19 sep. 2018 a las 6:33
  • ok, como podría hacer para que un div ocupe el 100% de la pantalla sin que se active el scroll? creo que lo que quiero lograr depende de eso, ya que el primer div en un contenedor para una imágen que quiero de fondo (sin que se active el scroll) y eso lo logré colocando ese contenedor con position: fixed y un ancho y altura de 100%. pero cuándo luego agrego el otro div no puedo hacer que me ubique en medio de la pantalla. intenté agregando este segundo contenedor dentro del primero pero no me toma como referencia ese contenedor y no se ubica en el medio de la pantalla tampoco.
    – JulianProg
    el 19 sep. 2018 a las 17:35
  • Tienes propiedades que son vh y vw que son algo más complicado de controlarlos bien pero prodría ayudarte. 100vh = 100% de altura y 100vw = 100% de ancho. Puedes jugar con estas medidas. el 20 sep. 2018 a las 6:08

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.