Centrer une image

flipflipflipflip Member
janvier 2015 modifié dans Discussions
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>

J'ai un string de l'array

Réponses

  • chrisschriss Member
    janvier 2015 modifié
    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>
  • flipflipflipflip Member
    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 de l'array

  • chrisschriss Member
    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)
  • flipflipflipflip Member
    janvier 2015 modifié
    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.

    J'ai un string de l'array

  • chrisschriss Member
    janvier 2015 modifié
    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.
  • flipflipflipflip Member
    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 de l'array

  • JosJos Member
    Bonjour,

    Je vais regarder çà d'ici peu. Merci pour la remonté.
  • JosJos Member
    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.
  • flipflipflipflip Member
    Merci

    J'ai un string de l'array

Connectez-vous ou Inscrivez-vous pour répondre.