Centrage impossible ?

**Zebulon777** · 02/04/2015, 11h05

Bonjour à tous,

j'essaye désespérément de centrer une DIV dans une page, mais je ne vois pas pourquoi je n'y arrive pas.
J'ai essayé d'ajouter "align=center" à la DIV et à la classe, mais aucun résultat.

Voila le code HTLM :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<DIV class="T_APROPOS">
<TABLE class="" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
	<TR class="">
		<TD width="10%" align="center" valign="middle" class="">DATES</TD>
		<TD width="12%" align="center" valign="middle" class="">VERSIONS</TD>
		<TD align="center" valign="middle" class="">COMMENTAIRES</TD>
	</TR>
	<TR bgcolor="">
	  <TD align="center" valign="middle">02/04/2015</TD>
	  <TD align="center" valign="middle" bgcolor="">2015.05</TD>
	  <TD align="left" valign="middle" bgcolor="">- ...</TD>
	  </TR>

Et voila la classe :

Code css :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/* TABLE DE LA PAGE A PROPOS */
.T_APROPOS {
        align=center;
/*	margin:0px;
	margin-left:25px;*/
	padding:0px;
	width:90%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #ffffff;
 
	-moz-border-radius-bottomleft:17px;
	-webkit-border-bottom-left-radius:17px;
	border-bottom-left-radius:17px;
 
	-moz-border-radius-bottomright:17px;
	-webkit-border-bottom-right-radius:17px;
	border-bottom-right-radius:17px;
 
	-moz-border-radius-topright:17px;
	-webkit-border-top-right-radius:17px;
	border-top-right-radius:17px;
 
	-moz-border-radius-topleft:17px;
	-webkit-border-top-left-radius:17px;
	border-top-left-radius:17px;
}
 
.T_APROPOS  table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}
 
.T_APROPOS tr:last-child td:last-child {
	-moz-border-radius-bottomright:17px;
	-webkit-border-bottom-right-radius:17px;
	border-bottom-right-radius:17px;
}
 
.T_APROPOS table tr:first-child td:first-child {
	-moz-border-radius-topleft:17px;
	-webkit-border-top-left-radius:17px;
	border-top-left-radius:17px;
}
 
.T_APROPOS table tr:first-child td:last-child {
	-moz-border-radius-topright:17px;
	-webkit-border-top-right-radius:17px;
	border-top-right-radius:17px;
}
 
.T_APROPOS tr:last-child td:first-child{
	-moz-border-radius-bottomleft:17px;
	-webkit-border-bottom-left-radius:17px;
	border-bottom-left-radius:17px;
}
 
.T_APROPOS tr:hover td{
	background-color:#cccccc;
}
 
.T_APROPOS td{
	vertical-align:middle;
	background-color:#6699cc;
	border:1px solid #ffffff;
	border-width:0px 1px 1px 0px;
	padding:3px;
	text-align:left;
	font-size:12px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}
 
.T_APROPOS tr:last-child td{
	border-width:0px 1px 0px 0px;
}
 
.T_APROPOS tr td:last-child{
	border-width:0px 0px 1px 0px;
}
 
.T_APROPOS tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
 
.T_APROPOS tr:first-child td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");
	background: -o-linear-gradient(top,#003366,003f7f);
 
	background-color:#003366;
	border:0px solid #ffffff;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:20px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
 
.T_APROPOS tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");
	background: -o-linear-gradient(top,#003366,003f7f);
 
	background-color:#003366;
}
 
.T_APROPOS tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
 
.T_APROPOS tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

J'avoue (sans honte) que la classe a été générée

Merci d'avance pour votre aide.

**Bovino** · 02/04/2015, 11h15

Code :

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

align=center;

J'imagine donc que selon toi, il suffit d'inventer des propriétés CSS pour qu'elles fassent ce que tu veux ?

**Erwan31** · 02/04/2015, 11h55

Bonjour,
pour commencer les attributs que vous utilisez au niveau du table sont tous obsolètes (sauf border qui peut servir pour des raisons de lisibilité en cas de CSS désactivée ou non chargée) et peuvent être remplacer par des propriétés CSS, à commencer par border-collapse.

La syntaxe que vous utilisez est invalide puisque vous devez respectez celle-ci : propriété : valeur; et la propriété align n'existe pas.

Pour le centrage horizontal d'un élément dimensionné (ou en display:table), il faut utiliser les marges latérales auto : margin: 0 auto;

**Zebulon777** · 02/04/2015, 13h32

Envoyé par Bovino

Code :

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

align=center;

J'imagine donc que selon toi, il suffit d'inventer des propriétés CSS pour qu'elles fassent ce que tu veux ?

Je mettais juste ça en exemple, mais je ne comprends pas pourquoi tu es si agressif !

Envoyé par Erwan31

Bonjour,
pour commencer les attributs que vous utilisez au niveau du table sont tous obsolètes (sauf border qui peut servir pour des raisons de lisibilité en cas de CSS désactivée ou non chargée) et peuvent être remplacer par des propriétés CSS, à commencer par border-collapse.

La syntaxe que vous utilisez est invalide puisque vous devez respectez celle-ci : propriété : valeur; et la propriété align n'existe pas.

Pour le centrage horizontal d'un élément dimensionné (ou en display:table), il faut utiliser les marges latérales auto : margin: 0 auto;

Merci, ça fonctionne impec, c'est exactement ce que je voulais.

Je ne suis pas un développeur, je m'aide beaucoup du forum et de générateurs sur le net ; j'apprends sur le tas et je fais donc confiance au code généré.
Si j'obtiens le résultat escompté, il est vrai que je ne vais pas plus loin, par contre, j'apprends beaucoup grâce au forum.
Merci encore.

**Bovino** · 02/04/2015, 14h25

mais je ne comprends pas pourquoi tu es si agressif !

Peut-être parce qu'il faut moins de 30s de recherche pour trouver la réponse, dans la FAQ par exemple ou sinon dans le glossaire CSS.

**Zebulon777** · 02/04/2015, 14h50

Bah je suis désolé, mais je n'avais pas trouvé.
Bref, c'est pas grave, ça fonctionne c'est le principal.
Merci encore.

**Erwan31** · 02/04/2015, 15h14

Envoyé par Zebulon777

Je ne suis pas un développeur, je m'aide beaucoup du forum et de générateurs sur le net ; j'apprends sur le tas et je fais donc confiance au code généré.
Si j'obtiens le résultat escompté, il est vrai que je ne vais pas plus loin, par contre, j'apprends beaucoup grâce au forum.
Merci encore.

Alors faut que tu trouves un générateur qui ponde du code plus actuel et si possible valide en html5,
même si la compatibilité descendante est assurée parles navigateurs; le but étant de séparer le plus possible ce qui relève de la présentation de ce qui relève de la structuration et du contenu.

**Zebulon777** · 02/04/2015, 15h33

Je comprends bien, mais c'est plus facile à dire qu'à faire... huhu.
Et en plus il faut que je trouve du temps.
Là, je suis juste entrain de rendre service, avec les (petits) moyens du bord.

Centrage impossible ?

Centrer un élément en CSS

Discussions similaires

Partager

Partager