使用显示器弯曲垂直对齐图像顶部的自举btn

Question

由于我的标题说明我想垂直对齐我的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 &amp; 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; 
} 

Answer 1

你感到困惑，因为你忘元素通常不能重叠对方。因此，为了在较大图像的顶部上有一个按钮，我们通常使用叠加（位置：绝对）技术来提高图像尺寸的灵活性。下面是修改后的示例

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

Answer 2

实现你预期的效果，请使用以下选项

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 &amp; 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