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

Vue hybride

Discussions similaires

Partager

Partager