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>
这是我的 JS 小提琴的链接: https ://jsfiddle.net/apasric4/wvaepsyk/1/
解决方案
您需要添加display: flex
到#overlay
, 以及两者flex: 1
和justify-content: center
到孩子(您可以使用 taret #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">×</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>
请注意,如果您还希望它们显示为“按钮”(而不是占据整个width
叠加层,您可以应用align-items: center
.
推荐阅读
- xamarin - 如何在 Xamarin.Forms 中为 StackLayout 正确创建自定义渲染器?
- java - 通过 Java Webapp 从查询中下载非常大的结果
- aws-cdk - 如何在 CDK 打字稿的 addToPolicy 方法中添加 sid
- vba - 尝试循环 IF(工作表中的 MID 函数
- bash - 处理完`-c`命令后如何保留bash shell
- python - 如何使用python运行特定文件
- python-3.x - 根据每组的第一行在熊猫数据框中创建一列
- javascript - 反应原生异步存储和 apollo-link 控制台日志未在承诺中调用
- arrays - 在 Google 表格中的 2 个值之间自动填充
- r - 如何在 kableExtra 脚注中引用参考文献?