centrage de texte avec des float

**Emcy** · 27/05/2008, 10h10

Bonjour,

voici ma page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>TEST</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="montheme1" href="theme1.css" />
</head>
 
<body>
	<div class="vid_float">
		<div class="blocTab">
			<div class="blocTabEnt">AAAA AAAAA AAAAA AAAAA AAAAAA</div>		
			<div class="blocTabFoot" style="text-align:center;"><span class="clUnderline2" onclick="sendResetCounter()">Réinitialiser</span></div>
 
		</div>
	</div>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.blocTab{
clear: both;
float:left;
margin: 0px 5px 10px 60px ;
padding:0;
background-color:#b9bce6;
color:white
}
 
.blocTabEnt{
padding: 4px 2px 2px 2em;
font-weight:bold;
background: url("tab.gif") no-repeat;
}
 
.blocTabFoot{
	padding:2px 2px 4px 2px;
}
 
.clUnderline2{
	cursor:pointer;
	text-decoration:underline;
	font-weight:bold;
}
 
.vid_float{
float: left;
margin:0 0 10px 0;
padding:0;
}

=> sous IE tout est bien mais sous FF le texte "Réinitialiser" n'est pas centré : comment faire pour résoudre le problème (sans toucher à la structure html) ?

Remarque : si on supprime l'encapsulage du div "vid_float", le texte se centre

**Er3van** · 27/05/2008, 11h25

Il te manque un ";" après "color:white".

Sinon pour ton problème, il devrait suffir de retirer le "float:left" de ton conteneur "vid_float" ( qui du coup s'appelerait toujours ainsi ? ^^' )

Mais, as-tu besoin de le laisser en flottant ? Si oui il faudra trouver une alternative.

**Emcy** · 27/05/2008, 11h31

j'utilise "vid_float" pour séparer verticalement ma page en fonction de son contenu => je crée plusieurs blocs "vid_float" les un à la suite des autres : j'utilise ça par exemple pour mettre des tableaux les uns a coté des autres (il peut y avoir plusieurs tableaux dans un div)
=> donc a priori je suis obliger d'utiliser un float (sauf si tu as une meilleur méthode)

**Er3van** · 27/05/2008, 11h38

Le centrage dans un flottant est un peu particulier je crois, mais il y a forcément une façon de procéder.

Une simple balise <center> ne fonctionne-t-elle pas ? ^^'

**Emcy** · 27/05/2008, 13h09

non ça ne fonctionne pas
la propriété text-align:center; fonctionne bien : le problème c'est que le div "blocTabFoot" prend comme taille la taille du texte => c'est pourquoi on a l'impression qu'il n'y a pas de centrage

le problème vient que lorsqu'on défini un div en float; alors les éléments qui sont à l'intérieur prennent comme taille leur contenu au lieu de prendre la taille du conteneur => pour remédier à ce problème, il faudrait fixer la largeur du conteneur mais je ne veux pas : je veux que le conteneur adapte sa taille en fonction du contenu et pas l'inverse

centrage de texte avec des float

Centrer un élément en CSS

Discussions similaires

Partager

Partager