Centrer un text-align:left

Version imprimable

Voir 40 message(s) de cette discussion en une page

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 :ccool:

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

Code:

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:

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

05/03/2013, 01h30
Muchos

Citation:

Envoyé par trentetroistours

Comment je peux centrer […]

Centrer quoi : le texte ou la div ?

Citation:

[…] 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

Citation:

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

Quoi ? :weird:
05/03/2013, 11h13
trentetroistours

chaque <li> est en text-align:left.
ma <ul> est en text-align:left mais je veux quelle soit centrée.
05/03/2013, 12h04
Torgar

Centrée par rapport à quoi ? :koi:

Si c'est par rapport à l'élément parent : margin: 0 auto; sur le <ul>
05/03/2013, 12h11
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...

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...
05/03/2013, 12h19
Torgar
Ça ? :koi:
Code:

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 :aie:
05/03/2013, 16h24
Muchos

C'est vrai que c'est mal expliqué :(
En plus, le code est étrange (des SECTION dans une liste ?) et l'expression «effet responsive» n'a aucun sens.
05/03/2013, 18h05
trentetroistours

Désolé pour les expilications...

Chaque <li> est un LIEN vers un article. Chacune contient une photo et un titre.
Du coup sur ma page j'ai une suite d'article regroupé dans ma <ul>.
J'ai voulu les mettre en "inline-block" pour créer plusieurs colonnes et lignes.
De plus, ma page à une witdh de 70% car je veux que ma <ul> n'occupe pas toute la largeur, et que le nombre de colonnes/lignes s'ajuste en fonction de la taille de la fenêtre de votre navigateur.

Ce que je voudrais c'est que l'ensemble de mes <li> soient centrés mais justifié à gauche..

C'est plus clair ?

Citation:

Envoyé par trentetroistours

Ce que je voudrais c'est que l'ensemble de mes <li> soient centrés mais justifié à gauche..

Ça ?

Code:

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 lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Centrer les boîtes et aligner à gauche leur contenu</title>
	<style type="text/css">
#menu {
        padding: 0;
        text-align: center; /* Centrer les LI */
}
#menu li {
        display: inline-block;
        text-align: left; /* Aligner à gauche le contenu des LI */
}
#menu li section {
        width: 150px;
        height: 150px;
        background-color: #CCC;
}
        </style>
</head>
<body>
 
<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>

06/03/2013, 12h34
trentetroistours

Pas tout a fait. Je veux que l'ensemble de mes <li> soient centrée mais justifiée à gauche.
Là mes <li> sont centrée certes mais si tu regardes les dernieres <li> elles sont centrée aussi alors que je les veux justifiées à gauche..

> Je veux que l'ensemble soit au centre de ma page mais justifié à gauche...
06/03/2013, 13h36
rodolphebrd

Bonjour,

Faites un croquis car à part l'exemple de @Muchos je ne vois pas où vous voulez en venir.
06/03/2013, 13h55
trentetroistours

1 pièce(s) jointe(s)

http://www.developpez.net/forums/att...1&d=1362574178
06/03/2013, 13h59
Bovino

Il n'y a rien de centré sur ton schéma...
06/03/2013, 14h57
trentetroistours

Bien sur que si, l'ensemble des <li> (symbolisé par le fond rouge) est au centre de ma page !
06/03/2013, 16h02
rodolphebrd

Quelle différence avec l'exemple de @Muchos?
06/03/2013, 16h12
trentetroistours

Si je met un text-align:center ma dernière ligne sera centrée alors que je la veut justifié à gauche !
06/03/2013, 16h39
rodolphebrd

Je suis désolé mais je ne vois pas.
Y'a de quoi devenir fou quand on relit l'ensemble des posts du sujet.:zen:
06/03/2013, 16h46
Torgar
Huuum, mes ancêtres m'ont soufflés ce code :
Code:

1 2 3 4 #menu { width: 50%; /* volontaire */ margin: 0 auto; }
Y a plus que les forces célestes pour nous aider !
06/03/2013, 18h38
NoSmoking

Bonjour,
merci de préciser ce qu'est

Citation:

je la veut justifié à gauche !
06/03/2013, 18h56
trentetroistours

2 pièce(s) jointe(s)

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

Ma liste d'article doit être centré dans ma page, au centre quoi.
MAIS je peux pas utilisé "text-align:left" parce que je veux que mes articles soient justifié à gauche.

Voir 40 message(s) de cette discussion en une page