正如我的标题所述,我正在尝试垂直对齐我的 btn,使其位于我的图像的中心。我没有任何运气,因为我的 btn 位于我的图像下方而不是顶部。我已经尝试了很多,但似乎没有任何效果。我已经发布了我的 HTML 和 CSS,也许有人可以指导我从哪里开始。
HTML
<div class="row">
<div class="col-md-4">
<div class="imgAbout">
<img src="img/team/neil580x410.jpg" class="img-responsive" alt="Neil Elmouchi Bio">
<a class="btn btn-sm btn-primary" href="bios/teamBioNeil.html" role="button">View More</a>
</div>
<h1>Neil Elmouchi</h1>
<h3>Chairman & CEO<br>
Senior Wealth Advisor</h3>
</div>
</div>
CSS
#about img {
margin: 0 auto;
}
.imgAbout {
background: #d5d5d5;
text-align: center;
}
.imgAbout img {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.imgAbout img:hover {
opacity: 0.4;
}
最佳答案
您很困惑,因为您忘记了元素之间通常不能重叠。因此,为了让按钮位于较大图像的顶部,我们通常使用叠加(position:absolute)技术来提高图像尺寸的灵 active 。这是您修改后的示例
.imgAbout {
position: relative;
}
/* overlay to inherit dimension from imgAbout and centralize button */
.center-container{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.imgAbout img {
width: 100%;
height: auto;
display: block;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.imgAbout:hover img {
opacity: 0.4;
}
关于html - 使用 display flex 在图像顶部垂直对齐 bootstrap btn,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38418218/