Discussion :

[supcomingenieur]

Bonjour,
suite à cette discussion, http://www.developpez.net/forums/d13...enu-deroulant/, et à partir du même fichier html et du même fichier css, j'ai ajouté un simple pied de page dans lequel j'ai mis le fameux copyrigth.
Je n'arrive pas à le mettre en centre de la page avec text-allign.
mon code CSS est le suivant

Code :

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

1
2
3
4
5
6
7
8
 
div#footer:after {
    color: #fff;
    content: "Copyright © 2013 Orange Tunisia. All rights reserved.";
    bottom: 30px;
    position: absolute;
    text-align: right;
}

[rodolphebrd]

Pour centrer un Div il faut lui fixer une largeur et margin right et left en auto.
C'est une des bases à connaitre....

[NoSmoking]

Bonjour,
Comment centrer horizontalement n'importe quel élément en CSS ?
La lecture de la FAQ n'est jamais une perte de temps.

Je rajouterais, pas vu au premier abord, que le mettre dans un :after ne présente pas grand intérêt.

[Bovino]

Je n'arrive pas à le mettre en centre de la page avec text-allign.

Code :

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

text-align: right;

Que dire...

mettre dans un :after ne présente pas grand intérêt.

Ben si en fait. L'intérêt, c'est de le mettre dans un pseudoélément de type inline pour lequel la notion de centrage est plutôt hasardeuse !

[rodolphebrd]

Ben si en fait. L'intérêt, c'est de le mettre dans un pseudoélément de type inline pour lequel la notion de centrage est plutôt hasardeuse !

Je ne comprends pas ta remarque, désolé

Centrer un pseudo-élément sans avoir recours au positionnement absolute: codepen

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#footer{
  width:500px;
  height:60px;
  background:salmon;
  text-align:center;
  line-height:60px;
 
}
#footer:after {
    color: #fff;
    content: "Copyright © 2013 Orange Tunisia. All rights reserved.";
 }

Je trouve cela inutile, alors que ça peut-être fait simplement, à moins que ce soit l'arbre qui cache la forêt.

Edit: correction d'une faute dans le css (suppression de bottom:30px, inutile)

[Bovino]

Ma remarque consistait juste à approuver la remarque de NoSmoking de façon ironique en insistant sur le fait que les pseudoéléments :after sont de type inline et qu'un text-align sur un élément inline n'a aucun sens.

D'ailleurs, dans ton exemple, c'est bien l'élément block conteneur qui définit le text-align et le :after n'a aucune utilité et devrait logiquement se trouver dans un span.