[CSS] - Centrare due div con float

**cichity74** · 25-07-2005, 17:57

Vorrei che i due div con float vengano centrati rispetto la pagina ma sembrano ignorare il <div align="center"></div>

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test float</title>
<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: center;
	background-color: #FCECDA;
}
#box_titolo_last_update {
	width: 200px;
	height: 15px;
	margin-top: 10px;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	border: 1px solid #FF0000;
	background-color: #FF0000;
	float:left;
}
#box_testo_last_update {
	width: 100px;
	height: 15px;
	margin-top: 10px;
	font-size: 9px;
	font-weight: bold;
	background-color: #FFFFFF;
	float:left;
	border-top: 1px solid #FF0000;
	border-right: 1px solid #FF0000;
	border-bottom: 1px solid #FF0000;
}
-->
</style>
</head>
<body>
	<div align="center">
		<div id="box_titolo_last_update">ULTIMO AGGIORNAMENTO:</div>
		<div id="box_testo_last_update">24 Luglio 2005</div>
	</div>
</body>
</html>

cichity74

**haZe** · 25-07-2005, 18:34

L'allineamento centrale va fatto coi CSS, non con align="center".

**cichity74** · 25-07-2005, 18:48

come

**haZe** · 25-07-2005, 18:52

margin: 0 auto; ----> browser standard
text-align: center; ----> (sull'elemento superiore, per IE)

o forse non ho capito la domanda?

**cichity74** · 25-07-2005, 19:05

ho provato
sostituendo:

codice:

<div align="center">

con:

codice:

<div style="text-align:center; margin: 0 auto;">

non funziona sugli elementi che contengono float
prova il mio script.. cosi ci capiamo
ciao e Grazie
cichity74

**haZe** · 25-07-2005, 19:48

Innanzitutto dai una larghezza al div contenitore. Poi, come già ti ho detto, il text-align: center va nell'elemento superiore, quindi nel body.

**cichity74** · 26-07-2005, 01:26

ho apportato le modifiche da te suggeritemi, e ho provato diverse varianti, ma non funziona.
Se elimino il float dai contenuti, tutto va come deve (al centro); ma purtroppo sono costretto ha dichiarare i contenuti come float per affiancare i due div.
Vedi:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test float</title>
<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: center;
	background-color: #FCECDA;
}
#cont {
	width: 470px;
	height:400px;
	text-align:center;
	margin: 0 auto;
	border: 1px solid #666666;
}
#box_titolo_last_update {
	width: 200px;
	height: 15px;
	margin-top: 10px;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	border: 1px solid #FF0000;
	background-color: #FF0000;
	float:left;
}
#box_testo_last_update {
	width: 100px;
	height: 15px;
	margin-top: 10px;
	font-size: 9px;
	font-weight: bold;
	background-color: #FFFFFF;
	border-top: 1px solid #FF0000;
	border-right: 1px solid #FF0000;
	border-bottom: 1px solid #FF0000;
	float:left;
}
-->
</style>
</head>
<body>
	<div id="cont">
		<div id="box_titolo_last_update">ULTIMO AGGIORNAMENTO:</div>
		<div id="box_testo_last_update">24 Luglio 2005</div>
	</div>
</body>
</html>

cichity74

**cichity74** · 26-07-2005, 16:47

up

**Mich_** · 26-07-2005, 17:21

Ma cosa devi centrare? due oggetti che devono stare vicini?

Allora devi raggruppare i due oggetti con un <div> e centrare tale div:

codice:

<body>
	<div id="cont">
		<div id="box_titolo_last_update">ULTIMO AGGIORNAMENTO:</div>
		<div id="box_testo_last_update">24 Luglio 2005</div>
	</div>
</body>

per centrare il cont devi fare:

codice:

body { text-align:center; } /* questo solo per IE */

#cont { margin: 0 auto; } /* questo per i browser conformi */

#box_titolo_last_update, #box_testo_last_update { float: left; } /* per affiancare due <div> */

Sorvoliamo al momento sul fatto che i testi vanno scritti in tag di tipo

(non possono stare direttamente nel <div> se usi XHTML).

**cichity74** · 26-07-2005, 19:14

[X Mich_]
Prima di tutto grazie per i suggerimenti

Ho seguito scrupolosamente i tuoi suggerimenti, ma il risultato è il medesimo:
Codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test float</title>
<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: center; /* questo solo per IE */
	background-color: #FCECDA;
}
#cont {
	width: 470px;
	height:400px;
	text-align:center;
	margin: 0 auto;
	border: 1px solid #666666;
}
#box_titolo_last_update {
	width: 200px;
	height: 15px;
	margin-top: 10px;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	border: 1px solid #FF0000;
	background-color: #FF0000;
	/*   */
	float:left;
}
#box_testo_last_update {
	width: 100px;
	height: 15px;
	margin-top: 10px;
	font-size: 9px;
	font-weight: bold;
	background-color: #FFFFFF;
	border-top: 1px solid #FF0000;
	border-right: 1px solid #FF0000;
	border-bottom: 1px solid #FF0000;
	/*   */
	float:left;
}
-->
</style>
</head>
<body>
	<div id="cont">
		<div id="box_titolo_last_update">ULTIMO AGGIORNAMENTO:</div>
		<div id="box_testo_last_update">24 Luglio 2005</div>
	</div>
</body>
</html>

come puoi vedere dall'img allegata, i due div vengono impaginati a sinistra :master:
---------------------------------------------------------

Originariamente inviato da Mich_
Sorvoliamo al momento sul fatto che i testi vanno scritti in tag di tipo

(non possono stare direttamente nel <div> se usi XHTML).

ho validato lo script su: http://validator.w3.org/check
ed il risultato è: This Page Is Valid XHTML 1.0 Transitional!

potresti spiegarmi meglio

cichity74

Discussione: [CSS] - Centrare due div con float

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] - Centrare due div con float

Permessi di invio