在圖像旁邊的垂直對齊按鈕

Question

我想讓我的鏈接在中間垂直對齊中心，我的標誌垂直對齊在中間，但如右下圖所示。我可以讓圖像完美地工作。但我無法獲得鏈接垂直對齊的中間。

這也將是全寬。

.footer-logo { 
 
    display: block; 
 
    position: absolute; 
 
    right: 50px; \t 
 
    margin-top: 30px; 
 
} 
 

 
.footer-main { 
 
    height: 200px; 
 
    background-image: url(../images/backgrounds/bg-image.jpg); 
 
    background-color: grey; \t 
 
    position: relative; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="footer-main"> 
 
    <a class="button" href="#">My test link here</a> 
 
    <img src="http://placehold.it/100" alt="" class="footer-logo"> 
 
</div>

Answer 1

存在CSS沒有top-margin僅margin-top或top

選項在此情況下，容器，#footer上甲使用display:flex，連同​​和justify-content: center;

其中align-items對齊Flexbox的垂直
和justify-content對齊它們horizo​​nally

的DOC裏面的物品：

• display:flex
• align-items
• justify-content

（評論後）選項B好像在Firefox中，應用align-items:center並不影響position:absolute;所以我加入transform:translateY(-50%)在一起的元素與徽標上的top:50%。

這樣做的原因是，頂部：50％的頁腳高度達到50％，而translateY（-50％）指的是標識高度的50％，所以基本上你會從上到下移動50％的頁腳高度，然後將其移回50％的高度，結果是它垂直居中。

選項C

使用display:inline-block連同vertical-align:middle在.footer-logo也可以工作。

OPTION d

多一個選擇是使用在.footer-logotop:calc(50% - 50px)但是這隻有當標識的高度保持不變。我們不推薦使用這種方法，但它是一個很好的使用calc() CSS功能

您選擇;）

.footer-logo { 
 
display: block; 
 
position: absolute; 
 
right: 50px; 
 
transform: translateY(-50%); 
 
top:50%; 
 

 
} 
 

 
.footer-main { 
 
height: 200px; 
 
background-color: grey; 
 
position: relative; 
 

 

 

 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="footer-main"> 
 
<a class="button" href="#">My test link here</a> 
 
<img src="http://placehold.it/50x100" alt="" class="footer-logo"> 
 
</div>