正如我的标题所说,我正在尝试垂直对齐我的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;
}
您感到困惑,因为您忘记了元素通常不能彼此重叠。因此,为了在较大图像的顶部上有一个按钮,我们通常使用叠加(位置:绝对)技术来提高图像维度的灵活性。这是您修改后的示例
.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;
}
https://jsfiddle.net/0bt4q9vk/
要实现预期结果,请使用以下选项
HTML:
<div class="row">
<div class="col-md-4">
<div class="imgAbout">
<img src="http://www.w3schools.com/css/img_fjords.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;
}
a{
vertical-align:top;
display:block;
margin-top:-430px
}
.imgAbout {
background: #d5d5d5;
text-align: center;
margin-top:20px;
}
.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;
}
h1,h3{
position:relative;
top:400px;
}
Codepen-http://codepen.io/nagasai/pen/mEpNOY?editors=1111