Dev Faq
1
votes

Comment centrer verticalement ces boutons au milieu du conteneur dans bootstrap?

Cela va être une question stupide, mais pour une raison quelconque, j'ai du mal à aligner ces boutons au milieu de la page.

Je veux qu'ils s'empilent les uns sur les autres au milieu de la superposition, mais non, ils sont coincés en haut de la superposition. Pouvez-vous m'aider?

entrez la description de l'image ici

Voici mon exemple de HTML: 

<h1 class="text-center">Portfolio</h1>
    <div class="row p-5">
      <div class=" col-sm-6 col-xl-4 mb-3">
        <div class="card">
          <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
          <div class="card-body">
            <h5 class="card-title text-center">Project 1</h5>
          </div>
          <div id="overlay">
            <div class="d-flex flex-column align-content-center">
              <button type="button" class="btn btn-primary">Demo</button>
              <button type="button" class="btn btn-secondary">Github Repo</button>
            </div>
          </div> 
        </div>
      </div>

1 commentaires

@Amaresh S M J'ai inclus un lien vers mon violon JS

4 Réponses :

0
votes

Vous devez définir la "superposition" du div parent sur position: relative et les éléments enfants sur position: absolute.

0 commentaires
1
votes

Vous devez ajouter display: flex à #overlay , et à la fois flex: 1 et justify-content: center aux enfants (que vous pouvez régler avec #overlay> div ): 

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Capstone Project</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <!-- navigation bar -->
  <ul class="nav sticky-top justify-content-around">
    <li class="nav-item">
      <a class="nav-link active" href="#">About Me</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Skills</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Me</a>
    </li>
  </ul>

  <button type="button" class="btn btn-primary hire" data-toggle="modal" data-target="#exampleModalCenter">
    Hire Me
  </button>

  <div class="about">
    <img src="img/profile-picture.jpg" class="img-fluid rounded mx-auto d-block shadow p-3 mb-5" alt="Profile Picture">
    <div id="typewriter" class="container text-center">
    </div>
  </div>

  <div id="particles-js">
  </div>


  <!-- portfolio -->

  <h1 class="text-center">Portfolio</h1>
  <div class="row p-5">
    <div class=" col-sm-6 col-xl-4 mb-3">
      <div class="card">
        <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
        <div class="card-body">
          <h5 class="card-title text-center">Project 1</h5>
        </div>
        <div id="overlay">
          <div class="d-flex flex-column align-content-center">
            <button type="button" class="btn btn-primary">Demo</button>
            <button type="button" class="btn btn-secondary">Github Repo</button>
          </div>
        </div>
      </div>
    </div>


    <div class="col-sm-6 col-xl-4 mb-3">
      <div class="card">
        <img src="img/image-2.jpg" class="card-img-top" alt="image-2">
        <div class="card-body">
          <h5 class="card-title text-center">Project 2</h5>
        </div>
        <div class="overlay">

        </div>
      </div>
    </div>

    <div class="col-sm-6 col-xl-4 mb-3">
      <div class="card">
        <img src="img/image-3.jpg" class="card-img-top" alt="image-3">
        <div class="card-body">
          <h5 class="card-title text-center">Project 3</h5>
        </div>
        <div class="overlay">

        </div>
      </div>
    </div>

    <div class=" col-sm-6 col-xl-4 mb-3">
      <div class="card">
        <img src="img/image-4.JPG" class="card-img-top" alt="image-4">
        <div class="card-body">
          <h5 class="card-title text-center">Project 4</h5>
        </div>
        <div class="overlay">

        </div>
      </div>
    </div>

    <div class="col-sm-6 col-xl-4 mb-3">
      <div class="card">
        <img src="img/image-5.jpg" class="card-img-top" alt="image-5">
        <div class="card-body">
          <h5 class="card-title text-center">Project 5</h5>
        </div>
        <div class="overlay">

        </div>
      </div>
    </div>

    <div class=" col-sm-6 col-xl-4 mb-3">
      <div class="card">
        <img src="img/image-6.jpg" class="card-img-top" alt="image-6">
        <div class="card-body">
          <h5 class="card-title text-center">Project 6</h5>
        </div>
        <div class="overlay">

        </div>
      </div>
    </div>
  </div>

  <!-- contact-section -->



  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Contact Information</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group row">
              <label for="inputName3" class="col-sm-2 col-form-label">Name:</label>
              <div class="col-sm-10">
                <input type="name" class="form-control" id="inputName3" placeholder="Name">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputEmail3" class="col-sm-2 col-form-label">Email:</label>
              <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputNumber3" class="col-sm-2 col-form-label">Phone Number:</label>
              <div class="col-sm-10">
                <input type="number" class="form-control" id="inputNumber3" placeholder="Number">
              </div>
            </div>
            <div class="form-group row">
              <label for="exampleFormControlTextarea1" class="col-sm-2 col-form-label">Message:</label>
              <div class="col-sm-10">
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center">

    <div class="svg-div ml-3 mr-3">
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
        <path id="Facebook__x28_alt_x29_" d="M90,15.001C90,7.119,82.884,0,75,0H15C7.116,0,0,7.119,0,15.001v59.998
          C0,82.881,7.116,90,15.001,90H45V56H34V41h11v-5.844C45,25.077,52.568,16,61.875,16H74v15H61.875C60.548,31,59,32.611,59,35.024V41
          h15v15H59v34h16c7.884,0,15-7.119,15-15.001V15.001z" />
      </svg>
    </div>

    <div class="svg-div ml-3 mr-3">
      <svg class="svg-twitter" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 430.117 430.117" style="enable-background:new 0 0 430.117 430.117;" xml:space="preserve">
        <path id="Twitter__x28_alt_x29_" d="M381.384,198.639c24.157-1.993,40.543-12.975,46.849-27.876
          c-8.714,5.353-35.764,11.189-50.703,5.631c-0.732-3.51-1.55-6.844-2.353-9.854c-11.383-41.798-50.357-75.472-91.194-71.404
          c3.304-1.334,6.655-2.576,9.996-3.691c4.495-1.61,30.868-5.901,26.715-15.21c-3.5-8.188-35.722,6.188-41.789,8.067
          c8.009-3.012,21.254-8.193,22.673-17.396c-12.27,1.683-24.315,7.484-33.622,15.919c3.36-3.617,5.909-8.025,6.45-12.769
          C241.68,90.963,222.563,133.113,207.092,174c-12.148-11.773-22.915-21.044-32.574-26.192
          c-27.097-14.531-59.496-29.692-110.355-48.572c-1.561,16.827,8.322,39.201,36.8,54.08c-6.17-0.826-17.453,1.017-26.477,3.178
          c3.675,19.277,15.677,35.159,48.169,42.839c-14.849,0.98-22.523,4.359-29.478,11.642c6.763,13.407,23.266,29.186,52.953,25.947
          c-33.006,14.226-13.458,40.571,13.399,36.642C113.713,320.887,41.479,317.409,0,277.828
          c108.299,147.572,343.716,87.274,378.799-54.866c26.285,0.224,41.737-9.105,51.318-19.39
          C414.973,206.142,393.023,203.486,381.384,198.639z" />
      </svg>
    </div>

    <div class="svg-div ml-3 mr-3">
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 430.117 430.118" style="enable-background:new 0 0 430.117 430.118;" xml:space="preserve">
        <path id="LinkedIn__x28_alt_x29_" d="M398.355,0H31.782C14.229,0,0.002,13.793,0.002,30.817v368.471
          c0,17.025,14.232,30.83,31.78,30.83h366.573c17.549,0,31.76-13.814,31.76-30.83V30.817C430.115,13.798,415.904,0,398.355,0z
          M130.4,360.038H65.413V165.845H130.4V360.038z M97.913,139.315h-0.437c-21.793,0-35.92-14.904-35.92-33.563
          c0-19.035,14.542-33.535,36.767-33.535c22.227,0,35.899,14.496,36.331,33.535C134.654,124.415,120.555,139.315,97.913,139.315z
          M364.659,360.038h-64.966V256.138c0-26.107-9.413-43.921-32.907-43.921c-17.973,0-28.642,12.018-33.327,23.621
          c-1.736,4.144-2.166,9.94-2.166,15.728v108.468h-64.954c0,0,0.85-175.979,0-194.192h64.964v27.531
          c8.624-13.229,24.035-32.1,58.534-32.1c42.76,0,74.822,27.739,74.822,87.414V360.038z M230.883,193.99
          c0.111-0.182,0.266-0.401,0.42-0.614v0.614H230.883z" />
      </svg>
    </div>

  </div>
  <!-- footer -->
  <div class="container-fluid">
    <div class="d-flex justify-content-between">
      <p>Copyright 2019<span>&#169;</span></p>
      <p>Back to Top</p>
    </div>
  </div>



  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

Ceci peut être vu ici .

* {
  box-sizing: border-box;
}

img[alt="Profile Picture"] {
  width: 40%;
}


/* why do this work idk */

img {
  width: 200px;
  height: 200px;
}

.about {
  position: absolute;
  z-index: 1;
  height: 100vh;
  width: 100vw;
}

#particles-js {
  background: rgb(72, 243, 29);
  height: 100vh;
  width: 100vw;
}

.svg-div {
  width: 50px;
  height: 50px;
}

svg {
  width: 100%;
}

span {
  font-size: 12px;
}

.nav {
  min-height: 40px;
}

.card {
  box-shadow: 8px 8px 10px #080808;
  transition: transform ease 0.1s;
  position: relative;
}

#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.02s ease-in;
  display: flex;
}

#overlay>div {
  flex: 1;
  justify-content: center;
}

.card:hover {
  transform: scale(1.1);
}

.hire {
  position: absolute;
  top: 100%;
  left: 47%;
}
typewriterContainer = document.querySelector('#typewriter');

const typewriter = new Typewriter(typewriterContainer, {
  loop: false,
  delay: 75
});

typewriter
  .typeString("<h1 class='display-4'>Hi, I'm Aman!</h1>")
  .typeString("<p class='lead'>I am learning how to program. I love tech. I am an aspiring entrepreneur. I want to change the world. </p>")
  .start();

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'particles.json', function() {
  console.log('particles.json loaded');
});
#overlay {
  display: flex;
}

#overlay > div {
  flex: 1;
  justify-content: center;
}

Notez que si vous souhaitez également qu'ils s'affichent sous forme de «boutons» (au lieu de prendre toute la largeur de la superposition, vous pouvez appliquer align-items: centre .

5 commentaires

Juste une question, mais comment savoir quand écrire du CSS dans la feuille de style par rapport à l'utilisation de classes CSS bootstrap? J'ai cette structure de pensée stricte où je veux seulement accomplir cela en utilisant des classes CSS boostrap. Mais il semble que vous pouvez vraiment faire n'importe quoi.

@AmandeepPasricha vous ne voulez pas que votre site ressemble à un site Web bootstrap normal, lorsque vous avez besoin de le personnaliser, vous ajoutez vraiment des classes CSS supplémentaires. La plupart des sites Web et des plugins ont des classes qui n'appartiennent pas à la bibliothèque d'amorçage.

Cela dépend vraiment de vos préférences personnelles. Tout ce que Bootstrap fait, c'est créer des cours pour vous faciliter la vie. Si vous voulez une mise en page `` vanille '', vous pouvez affirmer que les classes Bootstrap pures sont meilleures. Si vous voulez des modifications, vous aurez évidemment besoin de vos propres classes. L'équivalent de display: flex (et flex: 1 sur l'enfant) est la classe .d-flex , et l'équivalent de justify-content: center est .justify-content-center . Ce que vous utilisez dépend de vous :)

@Jerdine Sabio En tant que débutant, parfois je suis coincé sur quelque chose dans le bootstrap et je pense "devrais-je continuer à chercher une solution de bootstrap" ou personnaliser cela en utilisant CSS dans la feuille de style. Donc, fondamentalement, je devrais garder mon esprit flexible et utiliser soit ou? Il y a juste ce sentiment à l'arrière de ma tête en pensant, mec non, il doit y avoir un moyen de résoudre ce problème en utilisant boostrap et je continue des recherches angoissantes lol.

@ObsidianAge <3 votre dernier commentaire

0
votes

Votre code contient déjà .align-content-center . Vous pouvez simplement ajouter les propriétés ci-dessous à la classe .align-content-center . 

.align-content-center {
    position: absolute;
        top: 50%;
        width: 100%;
        left: 50%;
        transform: translate(-50%, -50%);    
    }

Découvrez-le: https://jsfiddle.net/hgf5m9kq/ a>

0 commentaires
0
votes

Voici une autre méthode sans flex d'affichage;

  1. ajouter z-index à #overlay,
  2. ajouter la position absolue à .d-flex,
  3. puis déplacez .d-flex en dehors de #overlay.

Mise à jour CSS: 

<div class="card">
   <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
   <div class="card-body">
     <h5 class="card-title text-center">Project 1</h5>
   </div>
   <div id="overlay"></div>
   <div class="d-flex flex-column align-content-center">
     <button type="button" class="btn btn-primary">Demo</button>
     <button type="button" class="btn btn-secondary">Github Repo</button>
   </div>
</div>

Mise à jour de la mise en page: 

#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.02s ease-in;
  z-index: 99999;
}

.d-flex.flex-column.align-content-center{
  position:absolute;
  width:100%;
}

Résultat:

screenshot

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor