CSS per allineare due div verticalmente

**abellos** · 04-10-2023, 14:48

Ciao,
sto usando uno script in jquery per allineare il div dati e il div div_form.
Il div dati deve andare in fondo alla pagina ed essere centrato orizzontalmente, il div_form deve essere centrato in verticale con lo spazio che rimane e centrato in orizzontale

questo il codice che uso attualmente

codice:




<!DOCTYPE html>
<HTML lang="it">
<HEAD>


	<meta charset="utf-8">
	
<title>pagina</title>


<link rel="icon" href="/image/favicon.png" type="image/png" />
<link rel="stylesheet" type="text/css" href="../style.css?r=pSG75qLYjp">
<script src="../inc/jquery.js"></script>
<script nonce="YvTfhRdiksut2Pd594aBDsqCuuKEAP9ATPB517lmIr4h8ZpwIx19Rinl">
//<!--


$(window).resize(function() {
	posizionaTesto();
});


$(document).ready(function()
 {
	posizionaTesto();	
 });


function posizionaTesto(){
	$('#dati').hide();
	$('#dati').css("top", (($(window).height() - $('#dati').height())) - 10 + 'px');
	$('#dati').css("left", (($(window).width()/2) - ($('#dati').width()/2)) + 'px');
	$('#dati').css("position","absolute");
	$('#dati').css("z-index",1);
	$('#dati').show();


	
	$('#div_form').hide();
	$('#div_form').css("top", ($(window).height() - $('#div_form').height() - $('#dati').height() ) / 2  + 'px');
	$('#div_form').css("left", (($(window).width()/2) - ($('#div_form').width()/2)) + 'px');
	$('#div_form').css("position","absolute");
	$('#div_form').css("z-index",1);
	$('#div_form').show();


}


//-->
</script>
<style nonce="HGNFb9ZDOVJn437ifKnyAMrckFHSes9qgxD1zNAhE2E1RyWK29fVt6F4">
.sfondo_bianco{
	background-color: white;
}
.allinea-div-verticale {
	display:flex;
	align-items:center;
}
.allinea_centro {
	display:flex;
	justify-content:center;
	align-items:center;
}
.nascosto {display: none}
</style>
</HEAD>
<body  class="sfondo_bianco" >


<div id="div_form" class="nascosto">


	<div class="ScrittaErr allinea_centro"><b></b></div><br><br>
	


	<form action="pagina.asp" method="post" name="login" id="form">
	
		<table border="0">
			<tr>
				<td>Nome utente:</td>
				<td><input class="InputText" type="text" name="u" id="u" autocomplete="OFF"></td>
			</tr>
			<tr>
				<td>Password:</td>
				<td><input class="InputText" type="password" name="p" id="p" autocomplete="OFF"></td>
			</tr>
			<tr>
				<td colspan="2" align="right"><img src="../image/logo_small_b.jpg" id="logo" class="stileLogoLogin" border="1" title="Logo"></td>
			</tr>
		</table>
	</form>
</div>


<div  id="dati"  class="nascosto">
	<table>
		<tr>
			<td align="center">
			
			<font color="#999999">
				dati azienda
				<br>
				<div class="allinea-div-verticale">
					altri dati
				</div>
			</font>


			</td>
			<td>


			<!--logo https se presente-->


			</td>
		</tr>
	</table>
</div>


</body>
</HTML>

posso fare la stessa cosa con l'uso dei css per allineare i due div? Chiedo qui perche' conosco poco i css e non avrei idea di come fare.
grazie in anticipo

**KillerWorm** · 04-10-2023, 22:37

Originariamente inviata da abellos

posso fare la stessa cosa con l'uso dei css per allineare i due div?

Ciao, direi proprio di sì; anzi, ad oggi mi pare inutilmente ingombrante l'uso di JavaScript/jQuery per una cosa del genere.

Se hai solo quei due div sulla pagina, potresti applicare flex al body; vedo che già lo hai usato per allineare i contenuti dentro i div.

In tal caso hai bisogno di specificare un'altezza 100% e rimuovere i margini per html e body.
Vai quindi ad applicare flex su body dando una direzione in colonna con flex-direction.
Per allineare centralmente in orizzontale puoi usare align-items:center come hai già fatto per i contenuti.
A questo punto basterà applicare margin:auto al primo div così che questo si centri anche verticalmente e spinga in basso il secondo div.

Qui il CSS minimo indispensabile:

codice:

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#div_form {
  margin: auto;
}

Ovviamente ricorda di rimuovere lo script, non servirà più.

Vedi se può andare.

**abellos** · 05-10-2023, 12:00

grande Killer!!! Funziona alla grande, avevo gia usato flex ma con l'aiuto di questo sito per centrare i div http://howtocenterincss.com/, non e' farina del mio sacco purtroppo

Inoltre adesso quando ridimensiono la finestra i due div stanno uno sopra l'altro, prima si accavallavano ed era brutto.

Discussione: CSS per allineare due div verticalmente

Strumenti discussione

Ricerca discussione

Visualizza

CSS per allineare due div verticalmente

Permessi di invio