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

publicado por: Anonymous

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:

_x000D_

_x000D_

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />_x000D_
_x000D_
    <form class="form-horizontal" role="form" id="">_x000D_
      <div class="form-group col-xs-12 col-sm-12 col-lg-12 col-md-12">_x000D_
        <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>_x000D_
        <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">_x000D_
          <select id="" class="form-control" name="" style="width: 100%;"></select>_x000D_
        </div>_x000D_
      </div>_x000D_
    </form>_x000D_
_x000D_
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />_x000D_
_x000D_
<div class="container">_x000D_
<form class="form-horizontal" role="form" id="">_x000D_
  <div class="row align-items-center">_x000D_
        <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>_x000D_
        <div class=" col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">_x000D_
          <select id="" class="form-control" name="" style="width: 100%;"></select>_x000D_
        </div>_x000D_
  </div>_x000D_
</form>_x000D_
</div>_x000D_
_x000D_
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" type="text/javascript"></script>

_x000D_

_x000D_

_x000D_

solución

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

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

Acá la demostración:

_x000D_

_x000D_

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

_x000D_

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />_x000D_
_x000D_
    <form class="form-horizontal" role="form" id="">_x000D_
      <div class="form-group col-xs-12 col-sm-12 col-lg-12 col-md-12">_x000D_
        <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>_x000D_
        <div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">_x000D_
          <select id="" class="form-control" name="" style="width: 100%;"></select>_x000D_
        </div>_x000D_
      </div>_x000D_
    </form>_x000D_
_x000D_
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *