html - top - container vertical align bootstrap




allineamento verticale con Bootstrap 3 (16)

Questa risposta presenta un trucco, ma ti consiglio vivamente di utilizzare flexbox (come indicato nella risposta di @Haschem ), poiché ora è supportato ovunque.

Collegamento demo:
- Bootstrap 3
- Bootstrap 4 alpha 6

Puoi ancora utilizzare una classe personalizzata quando ti serve:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

L'uso inline-block aggiunge ulteriore spazio tra i blocchi se si lascia uno spazio reale nel codice (come ...</div> </div>... ). Questo spazio extra rompe la nostra griglia se le dimensioni della colonna aggiungono fino a 12:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Qui, abbiamo spazi extra tra <div class="[...] col-lg-2"> e <div class="[...] col-lg-10"> (un ritorno a capo e 2 schede / 8 spazi). E così...

Diamo un calcio a questo spazio extra !!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Notare i commenti apparentemente inutili <!-- ... --> ? Sono importanti - senza di loro, lo spazio bianco tra gli elementi <div> occuperà spazio nel layout, rompendo il sistema di griglia.

Nota: Bootply è stato aggiornato

Sto usando Twitter Bootstrap 3 e ho problemi quando voglio allineare verticalmente due div , per esempio: collegamento JSFiddle :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Il sistema di griglia in Bootstrap utilizza float: left , non display:inline-block , quindi la proprietà vertical-align non funziona. Ho provato ad usare margin-top per sistemarlo, ma penso che questa non sia una buona soluzione per il design reattivo.


Layout della scatola flessibile

Con l'avvento della CSS Flexible Box , molti degli incubi dei web designer 1 sono stati risolti. Uno dei più hacky, l'allineamento verticale. Ora è possibile anche in altezze sconosciute .

"Due decenni di hack di layout stanno volgendo al termine, forse non domani, ma presto, e per il resto delle nostre vite".

- Il leggendario CSS Eric Meyer al W3Conf 2013

Flexible Box (o in breve, Flexbox), è un nuovo sistema di layout che è specificamente progettato per scopi di layout. La specifica afferma :

Il layout flessibile è superficialmente simile alla disposizione dei blocchi. Manca molte delle più complesse proprietà text-or document-centric che possono essere utilizzate nel layout a blocchi, come float e colonne. In cambio ottiene strumenti semplici e potenti per distribuire lo spazio e allineare il contenuto in modi che spesso richiedono webapp e pagine web complesse.

Come può aiutare in questo caso? Bene vediamo.

Colonne allineate verticali

Usando Twitter Bootstrap, abbiamo .row s con alcuni .col-* s. Tutto ciò che dobbiamo fare è visualizzare il .row 2 desiderato come contenitore di un contenitore flessibile e quindi allineare tutti i suoi elementi flessibili s (le colonne) verticalmente per align-items proprietà delle align-items .

ESEMPIO QUI (si prega di leggere i commenti con cura)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

L'output

L'area colorata mostra il riquadro di riempimento delle colonne.

Chiarire sugli align-items: center

align-items

Gli elementi flessibili possono essere allineati nell'asse trasversale della linea corrente del contenitore flessibile, in modo simile al justify-content ma nella direzione perpendicolare. align-items imposta l'allineamento predefinito per tutti gli elementi del contenitore flessibile, inclusi gli elementi flessibili anonimi.

align-items: center; Per valore centrale, la casella del margine dell'articolo flessibile è centrata sull'asse trasversale all'interno della linea.

Big Alert

Nota importante n. 1: Twitter Bootstrap non specifica la width delle colonne in dispositivi di piccole dimensioni a meno che non si assegni una delle .col-xs-# alle colonne.

Pertanto, in questa particolare demo, ho utilizzato le .col-xs-* affinché le colonne vengano visualizzate correttamente in modalità mobile, poiché specifica esplicitamente la width della colonna.

In alternativa, è possibile disattivare il layout di Flexbox semplicemente cambiando il display: flex; per display: block; in dimensioni dello schermo specifiche. Per esempio:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Oppure puoi specificare .vertical-align solo su dimensioni dello schermo specifiche in questo modo:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

In tal caso, andrei con l' approach @KevinNelson .

Nota importante n. 2: i prefissi dei fornitori omessi per brevità. La sintassi di Flexbox è stata modificata durante il tempo. La nuova sintassi scritta non funzionerà su versioni precedenti di browser Web (ma non così vecchi come Internet Explorer 9! Flexbox è supportato su Internet Explorer 10 e versioni successive).

Ciò significa che dovresti utilizzare anche proprietà con prefisso del venditore come display: -webkit-box e così via in modalità produzione.

Se fai clic su "Attiva / disattiva vista compilata" nella demo , vedrai la versione prefissata delle dichiarazioni CSS (grazie a Autoprefixer ).

Colonne a tutta altezza con contenuti allineati verticali

Come si vede nella demo precedente , le colonne (gli elementi flessibili) non sono più alte del loro contenitore (la scatola del contenitore flessibile, ovvero l'elemento .row ).

Ciò è dovuto all'utilizzo del valore center per la proprietà align-items . Il valore predefinito è stretch modo che gli elementi possano riempire l'intera altezza dell'elemento genitore.

Per risolvere questo problema, puoi aggiungere display: flex; anche alle colonne:

ESEMPIO QUI (Di nuovo, attenzione ai commenti)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

L'output

L'area colorata mostra il riquadro di riempimento delle colonne.

Infine, ma non meno importante, nota che i demo e i frammenti di codice qui sono pensati per darti un'idea diversa, per fornire un approccio moderno per raggiungere l'obiettivo. Si prega di prestare attenzione alla sezione " Big Alert " se si intende utilizzare questo approccio in siti Web o applicazioni reali.

Per ulteriori informazioni sul supporto del browser, queste risorse sarebbero utili:

1. Allinea verticalmente un'immagine all'interno di un div con altezza reattiva 2. È meglio usare una classe aggiuntiva per non alterare il valore predefinito di Twitter Bootstrap.


Con Bootstrap 4 (che è attualmente in alpha) puoi usare la .align-items-center . Quindi puoi mantenere il carattere reattivo di Bootstrap. Funziona subito bene per me. Vedi la documentazione di Bootstrap 4 .


HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

Ho pensato di condividere la mia "soluzione" nel caso in cui aiuti qualcun altro che non ha familiarità con le query @media stesse.

Grazie alla risposta di @ HashemQolami, ho creato alcune query multimediali che avrebbero funzionato come mobile-up come le classi col- * in modo che potessi impilare il col- * per mobile ma visualizzarle allineate verticalmente al centro per schermi più grandi, ad esempio

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

I layout più complicati che richiedono un numero diverso di colonne per risoluzione dello schermo (ad esempio 2 righe per -xs, 3 per -sm e 4 per -md, ecc.) Richiederebbero un po 'più avanzato di finagling, ma per una pagina semplice con -xs impilati e -sm e più grandi nelle file, questo funziona bene.


I comportamenti Flex sono supportati in modo nativo da Bootstrap 4. Aggiungi d-flex align-items-center nella row div. Non hai più bisogno di modificare il tuo css.

Semplice esempio: http://jsfiddle.net/vgks6L74/

<!-- language: html -->    
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

Con il tuo esempio: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

Fonte: https://getbootstrap.com/docs/4.0/utilities/flex/


L'ho fatto e fa quello che voglio che faccia.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

E ora la mia pagina sembra

<div class='container-fluid align-middle'>
    content

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

Mi sono imbattuto in questo stesso problema. Nel mio caso non conoscevo l'altezza del contenitore esterno, ma è così che l'ho risolto:

Prima imposta l'altezza per i tuoi elementi html e body modo che siano al 100%. Questo è importante! Senza questo, gli elementi html e body erediteranno semplicemente l'altezza dei loro figli.

html, body {
   height: 100%;
}

Poi ho avuto una classe contenitore esterno con:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

E infine il contenitore interno con classe:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML è semplice come:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

Questo è tutto ciò che serve per allineare verticalmente i contenuti. Dai un'occhiata in fiddle:

Jsfiddle


Non c'è bisogno di tabelle e celle di tabella. Può essere ottenuto facilmente usando la trasformazione. Esempio: http://codepen.io/arvind/pen/QNbwyM

Codice:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>


OK, ho accidentalmente mescolato alcune soluzioni e finalmente funziona ora per il mio layout, in cui ho cercato di creare una tabella 3x3 con colonne Bootstrap con la risoluzione più piccola.

/* required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>


Prova questo nel CSS del div:

display: table-cell;
vertical-align: middle;

Prova questo,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>


Se si utilizza la versione Less di Bootstrap e si esegue la compilazione in CSS da soli, è possibile utilizzare alcune classi di utilità da utilizzare con le classi Bootstrap.

Ho trovato che funzionano in modo fantastico dove voglio preservare la reattività e la configurabilità del sistema di griglia Bootstrap (come usare -md o -sm ), ma voglio che tutte le colonne di una data riga abbiano tutte la stessa altezza verticale ( in modo che possa quindi allineare verticalmente il loro contenuto e avere tutte le colonne nella riga condividono un centro comune).

CSS / Meno:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

Seguendo la risposta accettata, se non si desidera personalizzare il markup, per la separazione delle preoccupazioni o semplicemente perché si utilizza un CMS, la seguente soluzione funziona correttamente:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

La limitazione qui è che non è possibile ereditare la dimensione del carattere dall'elemento genitore perché la riga imposta la dimensione del carattere su 0 per rimuovere lo spazio bianco.


Aggiornamento 2018

So che la domanda iniziale era per Bootstrap 3, ma ora che Bootstrap 4 è stato rilasciato, ecco alcune indicazioni aggiornate sul centro verticale.

Importante! Il centro verticale è relativo all'altezza del genitore

Se il genitore dell'elemento il tuo tentativo di centrare non ha altezza definita, nessuna delle soluzioni di centratura verticale funzionerà!

Bootstrap 4

Ora che BS4 è flexbox, per impostazione predefinita ci sono molti approcci diversi per l'allineamento verticale usando: auto-margins , utilità di flessione , o utilità di visualizzazione insieme a utilità di allineamento verticale . Inizialmente "vertical align utils" sembra ovvio ma funzionano solo con elementi di visualizzazione inline e da tavolo. Ecco alcune opzioni di centraggio verticale Bootstrap 4 ..

1 - Centro verticale che utilizza i margini automatici:

Un altro modo per centrare verticalmente è usare my-auto . Questo centrerà l'elemento all'interno del suo contenitore. Ad esempio, h-100 rende la riga a tutta altezza e my-auto centrerà verticalmente la col-sm-12 .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

BS4 - Centro verticale utilizzando Demo dei margini automatici

my-auto rappresenta i margini sull'asse y verticale ed è equivalente a:

margin-top: auto;
margin-bottom: auto;

2 - Centro verticale con Flexbox:

Dal momento che Bootstrap 4 .row è ora display:flex puoi semplicemente usare l' align-self-center su qualsiasi colonna per .row verticalmente ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

oppure, usa align-items-center sull'intero .row per centrare verticalmente allineare tutti i col-* nella riga ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

BS4 - Colonne verticali a differenti altezze del centro Demo

3 - Centro verticale che utilizza i visualizzatori:

Bootstrap 4 ha utilità di visualizzazione che possono essere utilizzate per la display:table , display:table-cell , display:inline , ecc. Questi possono essere usati con l' allineamento verticale util per allineare elementi inline, inline-block o table cell.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

BS4 - Centro verticale con display utilizza Demo

Vedi anche: Vertical Align Center in Bootstrap 4

Bootstrap 3

Metodo Flexbox sul contenitore degli oggetti da centrare:

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

Trasforma il metodo translateY:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Mostra il metodo inline:

.display-inline-block {
    display:inline;
}
.display-inline-block > div {
    display:inline-block;
    float:none;
    vertical-align: middle;
}

Demo dei metodi di centraggio Bootstrap 3


    div{
    border:1px solid;
    }
    span{
    display:flex;
    align-items:center;

    }
    .col-5{
    width:100px;
    height:50px;
    float:left;
    background:red;
    }
    .col-7{
    width:200px;
    height:24px;
    

    float:left;
    background:green;

    }
   


    <span>
    <div class="col-5">
    </div>
    <div class="col-7"></div>
    </span>





twitter-bootstrap-3