Centrer un text-align:left

**trentetroistours** · 04/03/2013, 23h07

Bonjour à tous !

Voilà j'ai une div qui contient une liste d'articles. Je l'ai mis en "display:inline-block" pour pouvoir créer un effet responsive et ma dive à une largeur de 70%.

Comment je peux centrer et avoir le même effet que text-align:center mais avec mes articles qui sont alignés à gauche ??

Merci d'avance

> un exemple de mon code si ça peut vous aider...

Code html :

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
<body>
    <section id="page">
        <div id="wrapper">
            <ul id="menu">
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
            </ul>
        </div>
    </section>
</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
#page{
	width:70%;
	margin: 0 auto;
/*	text-align:center;*/
}
 
#menu li{
	display:inline-block;
}
 
#menu li section{
	width:150px;
	height:150px;
	background-color:#CCC;
}

En gros :
Je veux ça :
http://www.developpez.net/forums/att...1&d=1362592411

Je veux pas ça :
http://www.developpez.net/forums/att...1&d=1362592411

**Muchos** · 05/03/2013, 01h30

Envoyé par trentetroistours

Comment je peux centrer […]

Centrer quoi : le texte ou la div ?

[…] et avoir le même effet que text-align:center mais avec mes articles qui sont alignés à gauche ??

Vous voulez centrer mais aligner à gauche ? #nonsense

Je l'ai mis en "display:inline-block" pour pouvoir créer un effet responsive

Quoi ?

**trentetroistours** · 05/03/2013, 11h13

chaque <li> est en text-align:left.
ma <ul> est en text-align:left mais je veux quelle soit centrée.

**Torgar** · 05/03/2013, 12h04

Centrée par rapport à quoi ?

Si c'est par rapport à l'élément parent : margin: 0 auto; sur le <ul>

**trentetroistours** · 05/03/2013, 12h11

Non ce n'est pas la solution car ça marche si ma <ul> a une taille fixe.
Or ma page a une witdh:70%; pour pouvoir créer un effet responsive. Donc le margin : 0 auto; ne permet pas de centrer le contenu...

En fait, si vous faites le test avec le code, je veux exactement le rendu avec un text-align:center sur ma <ul> sauf que il faut que ce soit aligné à gauche...

**Torgar** · 05/03/2013, 12h19

Ça ?

Code :

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

1
2
3
4
#menu li{
	display:inline-block;
	text-align: center;
}

J'comprends rien à la demande... alignement centré mais aligné comme à gauche. Avoue qu'il y a de quoi devenir *Toc Toc* dans sa tête

**Bovino** · 06/03/2013, 21h26

Envoyé par Torgar

margin: 0 auto; sur le <ul>

Envoyé par trentetroistours

Non ce n'est pas la solution car ça marche si ma <ul> a une taille fixe.
Or ma page a une witdh:70%; pour pouvoir créer un effet responsive. Donc le margin : 0 auto; ne permet pas de centrer le contenu...

Ben si justement...

Envoyé par trentetroistours

En fait, si vous faites le test avec le code

Justement, en testant ton code, ça donne exactement ce que tu cherches...

Code html :

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
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>centrage margin auto</title>
	<style>
#page{
        width:70%;
        margin: 0 auto;
        background-color: #996665;
/*      text-align:center;*/
}
 
#menu li{
        display:inline-block;
}
 
#menu li section{
        width:150px;
        height:150px;
        background-color:#CCC;
}
        </style>
</head>
<body>
    <section id="page">
        <div id="wrapper">
            <ul id="menu">
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                    </section>
           	</a></li>
            </ul>
        </div>
    </section>
</body>
</html>

J'ai uniquement ajouté la couleur de fond pour coller au mieux à ton image (bon, l'en-tête de la page aussi puisque tu ne l'avais pas donné) et le résultat est probant
Nom : centrage.png
Affichages : 63
Taille : 86,1 Ko

Nom : centrage.png
Affichages : 63
Taille : 86,1 Ko

Centrer un text-align:left

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager