Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bootstrap div centrer verticalement

Sujet résolu
    13 juillet 2019 à 12:23:36

    Bonjour,

    Je fais appel à vous aujourd'hui parce que j'essaie de centrer verticalement une div sur ma page.

    J'avais très bien réussi au début avec le code suivant :

    <div class="row h-100">
      <div class="col-md-3 my-auto">
        <img src="public/img/1.jpg" class="img-circle img-no-padding img-responsive" alt="Rounded Image" width=200 height=200>
      </div>
      <div class="col-md-9 my-auto">
        <h1 class="merriweather text-white mb-3">Titre</h1>
        <p class="merriweather text-white">Again and again, we've seen him make tough choices when easier ones were available. I was not raised in a particularly religious household. And if we can do that - if we can embrace a common destiny - then I believe we'll not just help bring about a more hopeful day in America, we'll not just be caring for our own souls, we'll be doing God's work here on Earth. But the truth is, that isn't all that I know of the man. The profound mistake of Reverend Wright's sermons is not that he spoke about racism in our society. But we have a responsibility to join together on behalf of the world we seek - a world where extremists no longer threaten our people, and American troops have come home; a world where Israelis and Palestinians are each secure in a state of their own, and nuclear energy is used for peaceful purposes; a world where governments serve their citizens, and the rights of all God's children are respected.</p>
        </div>
      </div>
    </div>

    Sauf que les choses ont fait que je suis maintenant obligée d'entourer ce bout de code par un <div class="container">, ce qui me donne :

    <div class="container">
      <div class="row h-100">
        <div class="col-md-3 my-auto">
          <img src="public/img/1.jpg" class="img-circle img-no-padding img-responsive" alt="Rounded Image" width=200 height=200>
        </div>
        <div class="col-md-9 my-auto">
          <h1 class="merriweather text-white mb-3">Titre</h1>
          <p class="merriweather text-white">Again and again, we've seen him make tough choices when easier ones were available. I was not raised in a particularly religious household. And if we can do that - if we can embrace a common destiny - then I believe we'll not just help bring about a more hopeful day in America, we'll not just be caring for our own souls, we'll be doing God's work here on Earth. But the truth is, that isn't all that I know of the man. The profound mistake of Reverend Wright's sermons is not that he spoke about racism in our society. But we have a responsibility to join together on behalf of the world we seek - a world where extremists no longer threaten our people, and American troops have come home; a world where Israelis and Palestinians are each secure in a state of their own, and nuclear energy is used for peaceful purposes; a world where governments serve their citizens, and the rights of all God's children are respected.</p>
        </div>
      </div>
    </div>

    Et ici le code ne marche plus du tout, et je ne comprends pas pourquoi. J'ai essayé d'autres choses, comme align-self-center, mais rien n'y fait.

    Sauriez-vous pourquoi mon code ne marche plus ? :/

    Merci


    • Partager sur Facebook
    • Partager sur Twitter

    Life is about more than just survival

    Bootstrap div centrer verticalement

    × 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