¿Como puedo alinear verticalmente un contenido de un div con bootstrap 3? – html css bootstrap

Pregunta:


Si observan el ejemplo en una resolución de 1024p podrán observar como el texto del label se extiende y el select pegado a la parte superior del div que le corresponde a el.

Acá el ejemplo de mi form:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <form class="form-horizontal" role="form" id="">
      <div class="form-group col-xs-12 col-sm-12 col-lg-12 col-md-12">
        <label for="editar_pro" class="control-label col-xs-2 col-sm-2 col-lg-2 col-md-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
      </div>
    </form>

    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

Veo un ejemplo que conseguí pero funciona con bootstrap 4. Fuente aquí

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="container">
<form class="form-horizontal" role="form" id="">
  <div class="row align-items-center">
        <label for="" class="control-label col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class=" col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
  </div>
</form>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" type="text/javascript"></script>
Preguntado por: Pablo Contreras

Pablo Contreras

Seguí investigando y me tope con un css que lo soluciona:

.form-group {
    display: flex;
    align-items: center;
}

Acá la demostración:

.form-group {
    display: flex;
    align-items: center;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <form class="form-horizontal" role="form" id="">
      <div class="form-group col-xs-12 col-sm-12 col-lg-12 col-md-12">
        <label for="" class="control-label col-xs-2 col-sm-2 col-lg-2 col-md-2">Lineas de Producción Tales como Liquidos, Esteriles, Solidos, Etc...: </label>
        <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">
          <select id="" class="form-control" name="" style="width: 100%;"></select>
        </div>
      </div>
    </form>

    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *