Centrare orizzontalmente div

**bivio_08** · 06-12-2014, 20:42

Salve, sto creando un sito per mobile, ho la necessità di creare 4 box centrati a centro dello schermo su due righe, io ho fatto una cosa del genere:

codice:

<!doctype html><html>
<head>
<meta charset="utf-8">
<style>
#contenitore{
	width:100%;
	height:600px;
	color:#FFF;
	text-align: center;
}
.box-info{
	width: 45%;
	height: 45%;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}
.box-title{
	width: 100%;
	height: 25%;
	background: rgba(0, 0, 0, 0.1);
}
.box-body{
	width: 100%;
	height: 50%;
	padding-top: 15px;
	font-size: 38px
}
.box-footer{
	width: 100%;
	height: 25%;
}
.red{ background-color: #e74c3c;}
.giallo{ background-color: #f39c12;}
.azzurro{ background-color: #00c0ef;}
.verde{ background-color: #00a65a;}
</style>
</head>


<body>


<div id="contenitore">


	<div class="box-info red">
    	<div class="box-title">Titolo</div>
        <div class="box-body">Contenuto 1</div>
        <div class="box-footer">Footer</div>
    </div>
    
    <div class="box-info giallo">
    	<div class="box-title">Titolo</div>
        <div class="box-body">Contenuto 2</div>
        <div class="box-footer">Footer</div>
    </div>
    
    <div class="box-info azzurro">
    	<div class="box-title">Titolo</div>
        <div class="box-body">Contenuto 3</div>
        <div class="box-footer">Footer</div>
    </div>
    
    <div class="box-info verde">
    	<div class="box-title">Titolo</div>
        <div class="box-body">Contenuto 4</div>
        <div class="box-footer">Footer</div>
    </div>
</div>


</body>
</html>

Ma il problema e che non usano dimensioni fisse ma in % non riesco a centrare il tutto, quindi il tutto risulta posizionato sulla sinistra. Potete darmi un consiglio

Grazie.

**Prill** · 07-12-2014, 08:50

Puoi assegnare al contenitore una larghezza del 90% e settare i margini laterali su auto impostando la larghezza dei box interni sul 50% (i margini o padding saranno impostati sugli elementi interni). Oppure la prima colonna dovrebbe avere una larghezza del 45% e un margine sinistro del 5% mentre la colonna destra avrebbe un margine destro del 5%...
I modi per farlo sono diversi, anche gli elementi potrebbero avere float a sinistra e a destra, la scelta dipende poi dalle proprie preferenze e dalla soluzione che più si confa' alla struttura della pagina

**bivio_08** · 07-12-2014, 12:27

Originariamente inviata da Prill

Puoi assegnare al contenitore una larghezza del 90% e settare i margini laterali su auto impostando la larghezza dei box interni sul 50% (i margini o padding saranno impostati sugli elementi interni). Oppure la prima colonna dovrebbe avere una larghezza del 45% e un margine sinistro del 5% mentre la colonna destra avrebbe un margine destro del 5%...
I modi per farlo sono diversi, anche gli elementi potrebbero avere float a sinistra e a destra, la scelta dipende poi dalle proprie preferenze e dalla soluzione che più si confa' alla struttura della pagina

Ho fatto come hai detto, ho dato al contenitore il 90% e messo i margini corretti, in questo modo li ho centrati ma tutti attaccati, per separarli gli ho dato un bordo dell stesso colore dello sfondo, non so se sia la soluzione migliore.

Un altra cosa come faccio ad allineare verticalmente del testo senza sapere la l'altezza del suo contenitore? io quando ho la misura fissa utilizzo line-height

Discussione: Centrare orizzontalmente div

Strumenti discussione

Ricerca discussione

Visualizza

Centrare orizzontalmente div

Permessi di invio