PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 17/01/2015 08:28:18

flipflip
Membre
Lieu : Lyon
Inscription : 19/05/2008
Messages : 742
Site Web

Centrer une image

Bonjour,

J'ai voulu utiliser la classe float-centered pour centrer un élément dans un div

[== HTML ==]
<div class="col sml-12 med-12 lrg-12">
    <img class="float-center" src="img/fond.jpg">
</div>

Pas de chance l'image reste coller à gauche, pour activer le centrage j'ai été obligé d'ajouter un style à l'élément

[== HTML ==]
<div class="col sml-12 med-12 lrg-12">
    <img class="float-center" style="display: block" src="img/fond.jpg">
</div>

Code complet

[== HTML ==]
        <div class="container">
                <div class="grid doc-grid">
                        <div class="col sml-12 med-12 lrg-12 top"></div>

                        <div class="col sml-12 med-12 lrg-12">
                                <img class="float-center" style="display: block" src="img/fond.jpg" alt="Dépistage de l'art">
                        </div>

                        <div class="col sml-12 med-12 lrg-12">
                                <h1 class="text-center text-jaune">- ou la reconnaissance des artistes -</h1>
                        </div>

                        <div class="col sml-12 med-12 lrg-12">
                                <div class="col sml-12 med-4 lrg-4">
                                        <h2 class="text-center">- Exposition -</h2>
                                        <p class="text-rose">SCULPTURES FANNY VITAL.<br>PHOTOGRAPHIES PHILIPPE MALADJIAN.</p>
                                        <p>Du lundi au vendredi de 17h à 20h.<br>Le samedi de 9h à 12h.</p>
                                        <p class="text-rose">Rencontre avec les artistes sur place.</p>
                                </div>
                                <div class="col sml-12 med-4 lrg-4 border">
                                        <h2 class="text-center">- Vernissage -</h2>
                                        <p>Mercredi 20 mai 2015 à 18h.</p>
                                        <h2 class="text-center">- Conférence -</h2>
                                        <p>Jeudi 21 mai 2015 18h :</p>
                                        <p class="text-rose">"De la visibilité des artistes sur les réseaux sociaux numériques." Par Amandine Porcher, Chercheuse.</p>
                                </div>
                                <div class="col sml-12 med-4 lrg-4">
                                        <h2 class="text-center">- Débat public -</h2>
                                        <p>Vendredi 22 mai 2015 18h: "L'art est-il utile ?" Par les philosophes Jean-Paul Beau et Jean-Pierre Moreau.</p>
                                </div>
                        </div>
                </div>
        </div>

Dernière modification par flipflip (18/01/2015 07:23:20)


"J'ai un string dans l'array" | http://www.blogoflip.fr

Hors ligne

#2 17/01/2015 15:01:50

chriss
Membre
Lieu : Du côté de Montréal
Inscription : 13/08/2012
Messages : 313
Site Web

Re : Centrer une image

Bonjour,
dans ton fichier CSS

[== CSS ==]
.float-center {
width:100%;
margin-left: auto;
margin-right: auto;
}

Ne connaissant pas ton code complet, je ne suis pas sur que cela sois bon donc à enlever

[== HTML ==]
style="display: block"

dans la balise <img>

Dernière modification par chriss (17/01/2015 15:05:00)


Christian ...

Hors ligne

#3 18/01/2015 07:22:45

flipflip
Membre
Lieu : Lyon
Inscription : 19/05/2008
Messages : 742
Site Web

Re : Centrer une image

Bonjour,

J'ai modifié mon premier message pour mettre mon code complet.

Si j'ajoute width:100% à la class float-center que j'applique à img alors mon image prend toute la largeur du div qui la contient et ce même si ça taille d'origine est plus petite.


"J'ai un string dans l'array" | http://www.blogoflip.fr

Hors ligne

#4 18/01/2015 14:54:15

chriss
Membre
Lieu : Du côté de Montréal
Inscription : 13/08/2012
Messages : 313
Site Web

Re : Centrer une image

flipflip a écrit :

Bonjour,

J'ai modifié mon premier message pour mettre mon code complet.

Si j'ajoute width:100% à la class float-center que j'applique à img alors mon image prend toute la largeur du div qui la contient et ce même si ça taille d'origine est plus petite.

Normal! il faut que tu indique la grandeur (width) de ton image pour la centrer, si égal ou plus grande elle prendra toute la largeur de la Div donc mets Width au pourcentage voulu. (faire des tests)


Christian ...

Hors ligne

#5 19/01/2015 06:21:03

flipflip
Membre
Lieu : Lyon
Inscription : 19/05/2008
Messages : 742
Site Web

Re : Centrer une image

Ok, je viens de faire le test avec un

[== CSS ==]
.float-center {
width:40%;
margin-left: auto;
margin-right: auto;
}

Et en virant mon display sur le img et mon image reste collé à gauche. L'autre problème est que si je dois mettre une autre image qui doit être centré mais que dois tenir 100% du div, je vais être obligé de créer une classe par image ? Ca me parait pas vraiment être la bonne solution.

Dernière modification par flipflip (19/01/2015 06:21:20)


"J'ai un string dans l'array" | http://www.blogoflip.fr

Hors ligne

#6 20/01/2015 00:00:46

chriss
Membre
Lieu : Du côté de Montréal
Inscription : 13/08/2012
Messages : 313
Site Web

Re : Centrer une image

Bonjour,
essaye avec ce code que je n'ai pas testé

[== CSS ==]
.float-center{
    display: block;
    margin-left: auto;
    margin-right: auto }

Sinon je ne connais que le précédent code où il faut des margin:auto mais avant il faut indiquer la largeur.

EDIT: C'est aussi pour cela qu'il est bien adapter ces images, ne pas les avoir trop grandes.

Dernière modification par chriss (20/01/2015 00:02:38)


Christian ...

Hors ligne

#7 20/01/2015 07:10:22

flipflip
Membre
Lieu : Lyon
Inscription : 19/05/2008
Messages : 742
Site Web

Re : Centrer une image

Avec la dernière version ça marche, normal car au lieu de mettre le display block dans le style local il est dans le css.

Maintenant je remontais surtout ça pour l'équipe et savoir si il fallait faire une modification sur PluCss ou bien si c'était un comportement volontaire ?


"J'ai un string dans l'array" | http://www.blogoflip.fr

Hors ligne

#8 20/01/2015 09:03:11

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : Centrer une image

Bonjour,

Je vais regarder çà d'ici peu. Merci pour la remonté.

Hors ligne

#9 22/01/2015 10:56:09

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : Centrer une image

Merci pour votre remontée.

J'ai ajouté votre modification pour que cela fonctionne mieux. Elle sera disponible lors de la publication de la prochaine version de PluCSS ou dés maintenant sur le dépôt GitHub de PluCSS. Vous pouvez également rajouter un display: block; sur la classe .float-center.

Hors ligne

#10 22/01/2015 18:18:03

flipflip
Membre
Lieu : Lyon
Inscription : 19/05/2008
Messages : 742
Site Web

Re : Centrer une image

Merci


"J'ai un string dans l'array" | http://www.blogoflip.fr

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés