Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    431

    CSS per allineare due div verticalmente

    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
    Da un grande potere derivano grandi responsabilità

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Quote 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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    431
    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.
    Ultima modifica di abellos; 05-10-2023 a 12:05
    Da un grande potere derivano grandi responsabilità

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.