使用顯示器彎曲垂直對齊圖像頂部的自舉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