div, table et text-align : center

**tom42** · 02/03/2007, 15h32

Bonjour,
J'ai un div qui contient une table. Le css de mon div précise texte-lign : center;
IE (une fois n'est pas coutume) centre bien ma table alors que FF la positionne à gauche.

Voici le code reduit au plus simple :

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
<!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>Validation</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
    <style text="text/css">
        #formulaire_verification{
            text-align : center;
            border : solid #000 1px;
        }
	</style>
</head>
<body>
    <div id="formulaire_verification">
        <table  method="post" action="inscription.php" border="1" >
            <tr>
                 <td class="texte">champ 1 :</td>
                 <td><input type="text" id="validation_code" name = "validation_code"></td>
            </tr>
        </table>
    </div>
</body>
</html>

Si quelqu'un sait d'ou vient le problème je suis preneur.

**Sancho_54** · 02/03/2007, 15h47

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
 
<!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>Validation</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
    <style text="text/css">
        #formulaire_verification{
            border : solid #000 1px;
        }
	</style>
</head>
<body>
    <div id="formulaire_verification" align ='center'> 
        <table  method="post" action="inscription.php" border="1" >
            <tr>
                 <td class="texte">champ 1 :</td>
                 <td><input type="text" id="validation_code" name = "validation_code"></td>
            </tr>
        </table>
    </div>
</body>
</html>

Utilise align='center' dans ta div et enleve text-align :center; dans ton CSS

**tom42** · 02/03/2007, 16h02

Dejà vous aurez remarqué quelques erreurs dans le code joint (problème de copier coller)

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
<!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>Validation</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
    <style type="text/css">
        #formulaire_verification{
            text-align : center;
            border : solid #000 1px;
        }
	</style>
</head>
<body>
    <div id="formulaire_verification">
        <form  method="post" action="inscription.php" >
        <table border="1" >
            <tr>
                 <td class="texte">champ 1 :</td>
                 <td><input type="text" id="validation_code" name = "validation_code" /></td>
            </tr>
        </table>
        </form>
    </div>
</body>
</html>

Voila c mieux.

Sinon merci pour ta réponse ca marche avec ta solution mais j'utilise une dtd XHTML strict et le align='center' directement dans le div n'est pas valide
Je pensais que l'équivalent css etait text-align alors si quelqu'un sait ce que c'est.
Sinon je ferais une exeption pour cette page et je laisserai align = center dans le div.

**Mahefasoa** · 03/03/2007, 18h17

Salut tom42,
La solution que j'ai trouvé est la suivante:
1. j'ai créé un nouveau sélecteur appelé "table" dans la partie css
2. dans ce sélecteur, j'ai défini la largeur du tableau à 20%
3. ensuite, j'ai défini sur auto la valeur de margin-left et margin-right
4. enfin, j'ai défini sur left la valeur de text-align
Cela donne ceci:

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
31
32
 
<!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>Validation</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
    <style type="text/css">
        #formulaire_verification{
			text-align: center;
            border : solid #000 1px;
        }
		table {
			margin-left: auto;
			margin-right: auto;
			width: 20%;
			text-align: left;
		}
	</style>
</head>
<body>
    <div id="formulaire_verification">
        <form  method="post" action="inscription.php" >
        <table border="1">
            <tr>
                 <td class="texte">champ 1 :</td>
                 <td><input type="text" id="validation_code" name = "validation_code" /></td>
            </tr>
        </table>
        </form>
    </div>
</body>
</html>

Bon courage et @+

div, table et text-align : center

Tableau en CSS

Discussions similaires

Partager

Partager