it-swarm-eu.dev

Come allineare verticalmente gli elementi in un div?

Ho un div con due immagini e un h1. Tutti devono essere allineati verticalmente all'interno del div, uno accanto all'altro.

Una delle immagini deve essere absolute posizionata all'interno del div.

Qual è il codice CSS necessario affinché funzioni su tutti i browser comuni?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
646
Abdu

Wow, questo problema è popolare. Si basa su un malinteso nella proprietà vertical-align. Questo eccellente articolo lo spiega:

Capire vertical-align, o "Come (non) centrare verticalmente il contenuto" di Gavin Kistner.

"Come centrare in CSS"è un ottimo strumento web che aiuta a trovare gli attributi di centraggio CSS necessari per le diverse situazioni.


In poche parole (e per prevenire il marciume del link):

  • Elementi inline (e solo elementi in linea) possono essere allineati verticalmente nel loro contesto tramite vertical-align: middle. Tuttavia, il "contesto" non è l'intera altezza del contenitore genitore, è l'altezza della riga di testo in cui si trovano. jsfiddle esempio
  • Per gli elementi di blocco, l'allineamento verticale è più difficile e dipende fortemente dalla situazione specifica:
    • Se l'elemento interno può avere un altezza fissa , puoi rendere la sua posizione absolute e specificare la sua posizione height, margin-top e top. Esempio di jsfiddle
    • Se l'elemento centrato è costituito da una sola riga e la sua altezza genitore è fissa puoi semplicemente impostare il line-height del contenitore per riempire la sua altezza. Questo metodo è abbastanza versatile nella mia esperienza. Esempio di jsfiddle
    • ... ci sono più casi speciali di questo tipo.
816
Konrad Rudolph

Ora che il supporto di flexbox è in aumento, questo CSS applicato all'elemento contenitore centrerebbe verticalmente l'oggetto contenuto:

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

Utilizzare la versione con prefisso se è necessario utilizzare Explorer 10 e browser Android precedenti (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
109
E. Serrano

Ho usato questo codice molto semplice:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Ovviamente, che tu usi .class o #id, il risultato non cambierà.

104
user2346571

Ha funzionato per me:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
44
Romain
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Una tecnica da un mio amico:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO here

21
abernier

Per posizionare gli elementi di blocco al centro (funziona in IE9 e sopra), ha bisogno di un wrapper div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
16
Blacksonic

Tutti devono essere allineati verticalmente all'interno del div

Allineato come ? Cime delle immagini allineate con la parte superiore del testo?

Una delle immagini deve essere posizionata in modo assoluto all'interno del div.

Assolutamente posizionato rispetto al DIV? Forse potresti delineare quello che stai cercando ...?

fd ha descritto i passaggi per il posizionamento assoluto, oltre a regolare la visualizzazione dell'elemento H1 in modo che le immagini appaiano in linea con esso. A questo, aggiungerò che puoi allineare le immagini usando lo stile vertical-align:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... questo metterebbe l'intestazione e le immagini insieme, con i bordi superiori allineati. Esistono altre opzioni di allineamento; guarda la documentazione . Potresti anche trovare utile eliminare il DIV e spostare le immagini all'interno dell'elemento H1 - questo fornisce valore semantico al contenitore e rimuove la necessità di regolare la visualizzazione di H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
16
Shog9

Usa questa formula e funzionerà sempre senza crepe:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For Explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For Explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>
15
Anita Mandal

Il mio trucco è mettere all'interno del div un tavolo con 1 riga e 1 colonna, impostare il 100% di larghezza e altezza e la proprietà vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

11
joan16v

Quasi tutti i metodi devono specificare l'altezza, ma spesso non abbiamo altezze.
Ecco quindi un trucco in 3 linee CSS3 che non richiede di conoscere l'altezza.

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

È supportato anche in IE9.

con i suoi prefissi del venditore:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Fonte: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

10
Shadowbob

Possiamo usare un calcolo della funzione CSS per calcolare la dimensione dell'elemento e quindi posizionare l'elemento figlio di conseguenza.

Esempio HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

E CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo creato qui: https://jsfiddle.net/xnjq1t22/

Questa soluzione funziona bene anche con divheight e width.

Nota: la funzione calc non è testata per compatibilità con i vecchi browser.

3
Dashrath

Di default h1 è un elemento di blocco e renderà sulla riga dopo la prima img, e farà sì che il secondo img appaia sulla linea che segue il blocco.

Per evitare che ciò si verifichi, è possibile impostare h1 in modo che abbia un comportamento di flusso in linea:

#header > h1 { display: inline; }

Per quanto riguarda il posizionamento assoluto di img all'interno di div , è necessario impostare il div contenente per avere una "dimensione nota" prima che funzioni correttamente. Nella mia esperienza, devi anche cambiare l'attributo di posizione lontano dalla posizione di default: il parente funziona per me:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Se riesci a farlo funzionare, potresti provare a rimuovere progressivamente gli attributi height, width, position da div.header per ottenere gli attributi minimi richiesti per ottenere l'effetto desiderato.

AGGIORNARE:

Ecco un esempio completo che funziona su Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
3
Mike Tunnicliffe

Usando i CSS al centro verticale, puoi lasciare che i contenitori esterni agiscano come una tabella e il contenuto come una cella di tabella. In questo formato i tuoi oggetti rimarranno centrati. :)

Ho annidato più oggetti in JSFiddle per un esempio, ma l'idea di base è la seguente:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

L'esempio di più oggetti:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Risultato

 Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

3
Henk-Martijn

Oggi ho trovato una nuova soluzione per allineare verticalmente più linee di testo in un div usando CSS3 (e sto anche usando il sistema di griglia vststrap per l'abbellimento dell'interfaccia utente), che è il seguente:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Secondo la mia comprensione, il genitore immediato dell'elemento che contiene testo deve avere un'altezza. Spero che ti possa aiutare anche tu. Grazie!

2
Shivam

Basta usare un tavolo a una cella all'interno del div! Basta impostare la cella e l'altezza del tavolo e con il 100% e puoi usare l'allineamento verticale.

Un tavolo a una cella all'interno del div gestisce l'allineamento verticale ed è retrocompatibile all'età della pietra!

1
Joel Moses

Per me, ha funzionato in questo modo:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

L'elemento "a" convertito in un pulsante, usando le classi Bootstrap, ora è centrato verticalmente all'interno di un "div" esterno.

0
BernieSF

Questa è la mia soluzione personale per un elemento i all'interno di un div

Esempio JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}
0
danigonlinea

Esistono due modi per allineare gli elementi verticalmente e orizzontalmente

1. Bootstrap 4.3.X

per allineamento verticale: d-flex align-items-center

per allineamento orizzontale: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>
0
WasiF

Ho usato la seguente soluzione (senza posizionamento e altezza della linea) da oltre un anno, funziona anche con IE 7 e 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
0
Arsh