Come allineare verticalmente gli elementi in un div?
https://stackoverflow.com/questions/79461
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
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 posizionato all'interno del div.
Qual è il CSS necessario affinché funzioni su tutti i browser comuni?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Soluzione
Wow, questo problema è popolare.Si basa su un malinteso nel file vertical-align proprietà.Questo ottimo articolo lo spiega:
Comprensione vertical-align, o "Come (non) centrare verticalmente il contenuto" di Gavin Kistner.
“Come centrare nei CSS” è un ottimo strumento web che aiuta a trovare gli attributi di centratura CSS necessari per diverse situazioni.
In poche parole (e per prevenire il marciume del collegamento):
- Elementi in linea (E soltanto elementi in linea) possono essere allineati verticalmente nel loro contesto tramite
vertical-align: middle.Tuttavia, il “contesto” non è l’intera altezza del contenitore principale, è l’altezza della riga di testo in cui si trovano. esempio jsfiddle - Per gli elementi blocco, l'allineamento verticale è più difficile e dipende fortemente dalla situazione specifica:
- Se l'elemento interno può avere a altezza fissa, puoi prendere la sua posizione
absolutee specificarne ilheight,margin-topEtopposizione. esempio jsfiddle - Se l'elemento centrato è costituito da una sola riga E la sua altezza principale è fissa puoi semplicemente impostare il contenitore
line-heightper riempirne l'altezza.Questo metodo è abbastanza versatile secondo la mia esperienza. esempio jsfiddle - … ci sono altri casi speciali simili.
- Se l'elemento interno può avere a altezza fissa, puoi prendere la sua posizione
Altri suggerimenti
Ora che il supporto flexbox è in aumento, questo CSS applicato all'elemento contenitore centrerebbe verticalmente l'elemento contenuto:
.container {
display: flex;
align-items: center;
}
Utilizza la versione con prefisso se devi scegliere come target anche 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;
}
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, se usi a .class o un #id, il risultato non cambierà.
Ha funzionato per me:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
}
Una tecnica di 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;}
DIMOSTRAZIONE Qui
Tutti devono essere allineati verticalmente all'interno del div
Allineato Come?La parte superiore delle immagini è allineata con la parte superiore del testo?
Una delle immagini deve essere posizionata in modo assoluto all'interno del div.
Posizionato in modo assoluto rispetto al DIV?Forse potresti abbozzare quello che stai cercando...?
fd ha descritto i passaggi per il posizionamento assoluto, nonché la regolazione della visualizzazione del H1 elemento in modo tale che le immagini appaiano in linea con esso.A ciò, aggiungerò che puoi allineare le immagini utilizzando il file vertical-align stile:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...questo metterebbe insieme l'intestazione e le immagini, con i bordi superiori allineati.Esistono altre opzioni di allineamento; vedere la documentazione.Potresti anche trovare utile rilasciare il DIV e spostare le immagini all'interno del file H1 elemento: fornisce valore semantico al contenitore ed elimina la necessità di regolare la visualizzazione del file H1:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Per posizionare gli elementi del blocco al centro (funziona in IE9 e versioni successive), è necessario un wrapper div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
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>Quasi tutti i metodi necessitano di specificare l'altezza, ma spesso non ne abbiamo alcuna.
Quindi ecco un trucco CSS3 a 3 linee che non richiede di conoscere l'altezza.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
È supportato anche in IE9.
con i relativi prefissi del fornitore:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Fonte: http://zerosix Three.se/vertical-align-anything-with-just-3-lines-of-css/
Il mio trucco è inserire all'interno del div una tabella 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>
Per impostazione predefinita h1 è un elemento di blocco e verrà visualizzato sulla riga dopo il primo img e farà apparire il secondo img sulla riga successiva al blocco.
Per evitare che ciò accada, è possibile impostare h1 in modo che abbia un comportamento di flusso in linea:
#header > h1 { display: inline; }
Per quanto riguarda il posizionamento assoluto dell'img all'interno del div, è necessario impostare il div contenitore in modo che abbia una "dimensione nota" prima che funzioni correttamente.Nella mia esperienza, è anche necessario modificare l'attributo position rispetto a quello predefinito: position:relativo 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 di altezza, larghezza e posizione da div.header per ottenere gli attributi minimi richiesti per ottenere l'effetto desiderato.
AGGIORNAMENTO:
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>
Usando CSS per il centro verticale, puoi lasciare che i contenitori esterni si comportino come una tabella e il contenuto come una cella di tabella.In questo formato i tuoi oggetti rimarranno centrati.:)
Per fare un esempio, ho annidato più oggetti in JSFiddle, ma l'idea centrale è questa:
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 oggetti multipli:
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
Possiamo utilizzare un calcolo di 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 creata qui: https://jsfiddle.net/xnjq1t22/
Questa soluzione funziona bene con responsive div height E width anche.
Nota:La compatibilità della funzione di calcolo con i vecchi browser non è stata testata.
Ad oggi, ho trovato una nuova soluzione alternativa per allineare verticalmente più righe di testo in un div utilizzando CSS3 (e sto anche utilizzando il sistema di griglia bootstrap v3 per abbellire l'interfaccia utente), che è la 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%;
}
Per quanto ho capito, il genitore immediato dell'elemento contenente testo deve avere una certa altezza.Spero che possa aiutare anche te.Grazie!
Esistono due modi per allineare gli elementi verticalmente e orizzontalmente
1.Bootstrap 4.3.X
per l'allineamento verticale: d-flex align-items-center
per l'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>Basta usare una tabella a una cella all'interno del div!Basta impostare l'altezza della cella e della tabella e con al 100% e puoi utilizzare l'allineamento verticale.
Una tabella a una cella all'interno del div gestisce l'allineamento verticale ed è retrocompatibile fino all'età della pietra!
Utilizzo la seguente soluzione (senza posizionamento e senza 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>
Questa è la mia soluzione personale per un elemento i all'interno di un div
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;
}
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" è stato convertito in un pulsante, utilizzando le classi Bootstrap, e ora è centrato verticalmente all'interno di un "div" esterno.
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
.outdiv {
display: flex;
justify-content:center;
align-items:center;
}
Solo questo:
<div>
<table style="width: 100%; height: 100%">
<tr>
<td style="width: 100%; height: 100%; vertical-align: middle;">
What ever you want vertically-aligned
</td>
</tr>
</table>
</div>
Una tabella a una cella all'interno del div gestisce l'allineamento verticale ed è retrocompatibile fino all'età della pietra!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#style_center { position:relative; top:50%; left:50%; }
#style_center_absolute { position:absolute; top:50px; left:50px; }
<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
<div style="height:200px; width:200px; background:#00FF00">
<div id="style_center">+</div>
</div>
</body>
</html>
Ecco solo un altro approccio (reattivo):
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
width: auto;
table-layout:auto;
height: 100%;
}
.table:nth-child(even) {
background: #a9edc3;
}
.table:nth-child(odd) {
background: #eda9ce;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
width: 50%;
vertical-align: middle;
}
Sono un tipo .NET che si è appena appassionato alla programmazione web.Non ho usato i CSS (beh, un po').Ho usato un po' di JavaScript per realizzare la centratura verticale insieme alla funzione .css di jQuery.
Sto semplicemente pubblicando tutto dal mio test.Probabilmente non è eccessivamente elegante, ma finora funziona.
script.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="application/javascript">
function centerElementVertically(id) {
var btnDivHeight = $(id).outerHeight();
var prnt = $(id).parent();
var parentHeight = prnt.outerHeight();
var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
var newPct = newTop / parentHeight+'%;';
$(id).css({top: newTop});
}
function showAlert(){
alert("alert");
}
$(window).load(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
});
$(window).resize(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
})
</script>
<style>
#div1 {
position:relative;
height: 33%;
background-color: red;
overflow: hidden;
}
#buttonLeft {
position: relative;
float:left;
width:50%;
height:20%;
background-color: cornsilk;
}
#buttonRight {
position: relative;
float:right;
width:50%;
height:50%;
background-color: darkorchid;
}
#testerbtn {
position: absolute;
}
body {
background-color: aqua;
}
</style>
<body>
<div id="div1">
<div id="buttonLeft">
<button id="testerbtn">tester</button>
</div>
<div id="buttonRight"></div>
</div>
</body>
</head>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
o CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
