如何在引导程序中将这些按钮垂直居中于容器中间？
[英]How do I vertically center these buttons in the middle of the container in bootstrap?
问题描述
This is going to be a stupid question, but for some reason, I'm having trouble center aligning these buttons in the middle of the page.
这将是一个愚蠢的问题，但出于某种原因，我无法将这些按钮居中对齐在页面中间。
I want to them to stack on top of each other in the middle of the overlay, but right not they are stuck at the top of the overlay.我想让它们在叠加层的中间相互堆叠，但不是它们卡在叠加层的顶部。 Can you guys help me out?你们能帮我吗？
Here is my sample HTML:这是我的示例 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>
Here is a link to my JS fiddle: https://jsfiddle.net/apasric4/wvaepsyk/1/这是我的 JS 小提琴的链接： https : //jsfiddle.net/apasric4/wvaepsyk/1/
4 个解决方案
解决方案1
1 2019-08-01 02:33:29
You need to add display: flex to #overlay , and both flex: 1 and justify-content: center to the children (which you can taret with #overlay > div ):您需要将display: flex添加到#overlay ，并将flex: 1和justify-content: center到子项（您可以使用#overlay > div对其进行#overlay > div ）：
#overlay {
display: flex;
}
#overlay > div {
flex: 1;
justify-content: center;
}
This can be seen here .这可以在这里看到。
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">×</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>©</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>
Note that if you also want them to display as 'buttons' (as opposed to taking up the full width of the overlay, you can apply align-items: center .请注意，如果您还希望它们显示为“按钮”（而不是占据覆盖层的整个width ，您可以应用align-items: center 。
解决方案2
0 2019-08-01 02:32:33
您需要将父 div“覆盖”设置为 position:relative 并将子元素设置为 position:absolute 。
解决方案3
0 2019-08-01 02:41:28
Your code already contains .align-content-center .Just u can add the below given properties to .align-content-center class.您的代码已经包含.align-content-center 。您可以将以下给定的属性添加到.align-content-center类。
.align-content-center {
position: absolute;
top: 50%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
}
check it out: https://jsfiddle.net/hgf5m9kq/看看： https : //jsfiddle.net/hgf5m9kq/
解决方案4
0 2019-08-01 02:47:25
Here's another way without display flex;这是没有显示 flex 的另一种方式；
- add z-index to #overlay,将 z-index 添加到 #overlay，
- add position absolute to .d-flex,将绝对位置添加到 .d-flex，
- then move .d-flex outside of #overlay.然后将 .d-flex 移到 #overlay 之外。
CSS Update: 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%;
}
Layout update:布局更新：
<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>
Result:结果：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何垂直放置Bootstrap容器？ - How to vertically center a Bootstrap container?
如何在 Bootstrap 中垂直居中容器？ - How to vertically center a container in Bootstrap?
更少的Bootstrap 3-如何将容器水平和垂直居中 - Bootstrap 3 with Less - How I manage to center the container horizontally and vertically
如何在引导容器中垂直居中放置文本 - How to center text vertically within bootstrap container
如何在div标签中居中（垂直和水平）按钮？ - How do I center (vertically and horizontally) buttons in a div tag?
如何在引导容器的中间居中放置表单？ - How to center a form in the middle of bootstrap container?
如何使用引导程序垂直将列居中？ - How do I responsively center columns with bootstrap vertically?
如何在引导程序中将div垂直居中？ - How can I center vertically a div in bootstrap?
如何在中间垂直对齐框 - how do I vertically align boxes in middle
如何在Bootstrap 4中相对于父容器使子内容垂直居中 - How to make child content vertically in center as respect to parent container in bootstrap 4
相关标签