Partage
  • Partager sur Facebook
  • Partager sur Twitter

centrer 1 image dans une colonne bootstrap

+ media queries

Lo11
    28 janvier 2017 à 11:06:35

    Bonjour a tous,

    Je suis bloquée dans mon code:

    1. je n'arrive pas a centrer mes images dans les colonnes bootstrap, et si j'y arrive (grâce au padding-left), des que je le mets en écran plus petit tout bouge... :( pour info: j'ai essaye de rajoute des class dans les div des colonnes bootstrap mais rien a faire, je n'y arrive pas.  

    2. mon media query ne marche pas quelqu'un peut me dire pourquoi (je dois etre aveugle, sur une autre page il marche)

    voici mon code html:

    <!DOCTYPE html>

    <html lang="fr">

    <head>

    <meta charset="utf-8"/> <!-- Codification de caractères utf-8 -->

    <meta name="authors" content="Lorea Berhonde, Julie Hervy, Julien Maxime, Mikel Goicoechea"/>

    <meta name="description" content="Artezic. Site web de partage et création de musique"/>

    <meta name="keywords" content="Artezic musique partage collaboration arte"/>

    <link rel="stylesheet" href="artezic.css"> <!-- Liaison avec le css-->

    <link href="Bandeau_Projets_termines2.css" rel="stylesheet" type="text/css">

            <link rel="stylesheet" href="css/bootstrap.css" media="screen">

        <title>Artezic</title>

    </head>

    <body>

    <header>

    </header>

    <section class="content">

    <!--Pour mettre tout le content qui change à chaque page-->

            <!--Bandeau 1 avec projets terminés_accueil_Lorea-->

            <section class="bandeau_projetTermines">

                    <div class="container-fluid">

                       <div class="row">

                                <div class="col-md-2 col-xs-12">

                                    Zone de gauche

                                </div>

                                <div class="col-md-8 col-xs-12">

                                        <div class="col-md-3 col-xs-6">

                                       <img src="images_bandeau1/plume.jpg" alt="" class="img1"/> 

                                   <img src="images_bandeau1/play-button.png" alt="" class="play"/> <!--mettre titre de la photo-->

                                        </div>

                                        <div class="col-md-3 col-xs-6">

                                       <img src="images_bandeau1/chevaux.jpeg" alt="" class="img1"/>

                                   <img src="images_bandeau1/play-button.png" alt="" class="play"/> <!--mettre titre de la photo-->

                                        </div>

                                        <div class="col-md-3 col-xs-6">

                                       <img src="images_bandeau1/dreamcatcher.jpg" alt="" class="img1"/>

                                   <img src="images_bandeau1/play-button.png" alt="" class="play"/> <!--mettre titre de la photo-->

                                        </div>

                                        <div class="col-md-3 col-xs-6">

                                       <img src="images_bandeau1/fleur.jpg" alt="" class="img1"/>

                                   <img src="images_bandeau1/play-button.png" alt="" class="play"/> <!--mettre titre de la photo-->

                                        </div>

                                </div>

                                <div class="col-md-2 col-xs-12">

                                    Zone de droite

                                </div>

               </div>

                            <div class="row">

                                <div class="col-md-2 col-xs-12">

                                    Zone de gauche

                                </div>

                                <div class="col-md-8 col-xs-12">

                               <div class="col-md-4 col-xs-6">

                                   <img src="images_bandeau1/ciel.jpg" alt="" class="img1"/>

                               <img src="images_bandeau1/play-button.png" alt="" class="play"/> <!--mettre titre de la photo-->

                                    </div>

                                    <div class="col-md-4 col-xs-6">

                                   <img src="images_bandeau1/arcenciel.jpg" alt="" class="img1"/>

                               <img src="images_bandeau1/play-button.png" alt="" class="play"/> <!--mettre titre de la photo-->

                                    </div>

                                    <div class="col-md-4 col-xs-12">

                                   <img src="images_bandeau1/arbre.jpg" alt="" class="img1"/>

                               <img src="images_bandeau1/play-button.png" alt="" class="play"/> <!--mettre titre de la photo-->

                                    </div>    

                                </div>

                                <div class="col-md-2 col-xs-12">

                                    Zone de droite

                                </div>

               </div>

           </div>

            </section>

    </section>

    </body>

    </html>

    et mon code css:
    @charset "utf-8";
    /* CSS Document Bandeau Projet Terminés _ Lorea */
    /*Bandeau gris en arriere plan + images caracteristiques generales*/
    .bandeau_projetTermines{
    background-color:#e6e6e6;
    height:450px;
    padding-top:4%;
    padding-bottom:5%;
    }
    img{
        overflow:hidden;
        -webkit-border-radius:50px;
        -moz-border-radius:50px;
        border-radius:50%;
        width:150px;
    height:150px;
    }
    .row {
        margin-bottom: 0px;
    }
    .row [class^="col-"] {
        padding-top: 10px;
        padding-bottom: 50px;
        background-color: #eee;
        border: 1px solid #ddd;
        border: 1px solid rgba(86,61,124,.2);
    }
    /*image 1ere ligne*/
    .img1{
    position:absolute;
    z-index:1;
    }
    /* Play sur l'image*/
    .play{
    z-index:2; /*permet de mettre l'image en position 2 cad devant la position 1 */
    position:relative;
    margin-top:45px;
    margin-left:50px;
    border-radius:0%;
    width:50px;
    height:60px;
    }
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles pour cette Media Queries */
    .col-md-3 col-xs-6{
    padding-left:50px;
    }
    .row [class^="col-"]{
    }
    }

    Merci

    • Partager sur Facebook
    • Partager sur Twitter
    Alexander M
    • HTML / CSS
      28 janvier 2017 à 12:17:22

      Pour centrer le contenu de toute la colonne ajoute la class text-center

      <div class="col-sm-6 text-center">
    <img src="ton image"/>
</div>

      Seulement l'image

      <div class="col-sm-6">
    <p class="text-center"><img src="ton image"/></p>
</div>

      • Partager sur Facebook
      • Partager sur Twitter
      Lo11
        28 janvier 2017 à 13:37:45

        Merci Alexander pour ta réponse,

        ta première réponse marche bien sur petit Ecran mais ne me centre pas les images sur grand écran. Peux-tu peut-être m'aider un peu plus?

        La 2eme ne marche pas bien, ou alors c'est que je ne sais pas l'utiliser.

        • Partager sur Facebook
        • Partager sur Twitter
        Alexander M
        • HTML / CSS
          28 janvier 2017 à 13:48:24

          retire les margin-left sur les image.
          • Partager sur Facebook
          • Partager sur Twitter
          Lo11
            28 janvier 2017 à 13:58:13

            dequ'elles images?play? mais ca me les deplacerait?

            -
            Edité par Lo11 28 janvier 2017 à 13:59:13

            • Partager sur Facebook
            • Partager sur Twitter
            FaresOuyahia
              6 août 2017 à 20:54:18

              réponse en retard ! tu donnes la classe center-block à  ton image !
              • Partager sur Facebook
              • Partager sur Twitter
              Shonen17
              • HTML / CSS
                7 août 2017 à 9:21:45

                FaresOuyahia a écrit:

                réponse en retard ! tu donnes la classe center-block à  ton image !


                center-block + img-responsive fais le taf en effet.

                <img class="img-responsive center-block" alt="" src="" />

                cf Bootstrap.

                • Partager sur Facebook
                • Partager sur Twitter
                Lo11
                  21 octobre 2017 à 11:51:58

                  Merci à tous!! Désolée pour cette repo en retard, oups. Projet terminé et accomplie . Encore merci
                  • Partager sur Facebook
                  • Partager sur Twitter

                  centrer 1 image dans une colonne bootstrap

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur ●
                  • Markdown