Forum : div l'une a gauche l'autre au centre

Décrivez ici votre problème ou ce que vous cherchez à faire.
bonjour,

<div id="logo" >
    <!--a mettre pour la banniere-->
        <div class="logo1" ><img src="logo/logo_petit.png" > </div>
        <div class="logo2" ><img src="site/BANNIERE/rien.png" id="banniere" height="165" width="1100" id="banniere" /></div></br>

    </div>

j'ai essayer les float, absolute, relative, etc etc...
Ce que je veux

mettre logo1 a gauche et logo 2 au centre

Ce que j'obtiens

le logo2 est sous le logo1

judoka0209

Auteur

Réponse acceptée

merci beaucoup c'est exactement ca que je desirais, trop top

Carouge10

Bonjour,
Je ne suis pas expert en css.
Je pense que tu peux le faire soit avec les "flexbox" ou les "grid"

JRcode

Hello, tu peux essayer le code suivant :

<style>
    #logo{
        display: flex;
    }

    .logo2{
        position: absolute;
        left: 50%;
        margin-left: -550px;
    }
</style>

  <div id="logo" >
      <!--a mettre pour la banniere-->
          <div class="logo1" ><img src="https://picsum.photos/200/300" > </div>
          <div class="logo2" ><img src="https://picsum.photos/200/300" id="banniere" height="165" width="1100" id="banniere" /></div></br>
  </div>

Voici ma démarche (en css il y a 300 façons de faire le même truc est c'est jamais sipmle lol) :

1/ ton logo2 est sous le logo1 car ce sont des <div> et leur comportement normal est de s'enchainer en sautant de ligne ; pour les mettre au même niveau verticalement tu peux faire un display:flex sur l'élément parent de ces <div> : ici ta <div> #logo
2/ ensuite je mets logo2 en position absolute pour pouvoir le centrer sur la page et non entre logo1 et la fin de la page
3/ pour le centrer j'aligne son bord gauche au milieu de l'écran (left: 50%) puis je le ramène d'une demie largeur en arrière (margin-left: -550px) étant donné que tu lui a donné une largeur de 1100px

Et le tour est joué !

div l'une a gauche l'autre au centre

3 réponses