如何在引导程序中将这些按钮垂直居中在容器的中间？

问题描述 投票：0回答：4

这将是一个愚蠢的问题，但由于某种原因，我无法在页面中间居中对齐这些按钮。

我希望它们在覆盖层的中间彼此堆叠，但不是它们卡在覆盖层的顶部。你们能帮帮我吗？

这是我的示例 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>
html css bootstrap-4
4个回答
1
投票

您需要将 

display: flex
添加到 
#overlay
，并将 
flex: 1
和 
justify-content: center
添加到子级（您可以使用 
#overlay > div
进行调整）：

#overlay {
  display: flex;
}

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

这可以在这里看到。

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');
});
* {
  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%;
}
<!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/[email protected]/particles.min.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

请注意，如果您还希望它们显示为“按钮”（而不是占据覆盖层的完整 

width
，您可以应用 
align-items: center
。

0
投票

您的代码已经包含 

.align-content-center
。只需您可以将以下给定属性添加到 
.align-content-center
类。 

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

查看一下：https://jsfiddle.net/hgf5m9kq/

0
投票

这是另一种不使用显示柔性的方法；

  1. 将 z-index 添加到#overlay，
  2. 将绝对位置添加到.d-flex，
  3. 然后将 .d-flex 移到 #overlay 之外。

CSS 更新：

#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%;
}

布局更新：

<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>

结果：

0
投票

您需要将父级div“overlay”设置为position:relative，将子元素设置为position:absolute。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.