如何通過基線垂直對齊文字和圖像？

我有文本和三個圖像以垂直對齊基線。我已經使用垂直對齊屬性通過文本底部對齊項目，但它仍然沒有正確對齊。如何通過基線垂直對齊文字和圖像？

請參閱透明黑匣子幫助您查看基線問題的屏幕截圖。

.container { 
 
    font-size: 16px; 
 
} 
 

 
.ayc_cooperation { 
 
    margin: 0 5% 0 5%; 
 
    font-size: 0.75rem; 
 
    font-weight: 300; 
 
    color: #535353; 
 
} 
 

 
.ayc_cooperation:before { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.ayc_cooperation:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 6.5rem; 
 
} 
 

 
.ayc_cooperation_ini_logo { 
 
    float: left; 
 
    width: 9.6875rem; 
 
    height: 4.5rem; 
 
} 
 

 
.ayc_cooperation_ini_logo img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.ayc_co_container { 
 
    float: right; 
 
    line-height: 8; 
 
    height: 4.5rem; 
 
} 
 

 
.ayc_co_container img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.ayc_co_container img:first-child { 
 
    width: 7.5rem; 
 
} 
 

 
.ayc_co_container img:nth-child(2) { 
 
    width: 8rem; 
 
} 
 

 
.ayc_co_container img { 
 
    margin-right: 2.5rem; 
 
} 
 

 
.ayc_co { 
 
    display: inline-block; 
 
    margin-left: 2.5rem; 
 
    font-size: 0.75rem; 
 
    line-height: 14px; 
 
    vertical-align: text-bottom; 
 
} 
 

 
.ayc_de_lebe_ev_img { 
 
    width: 8rem; 
 
} 
 

 
.ayc_de_lebe_ev_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.ayc_de_lebe_img { 
 
    width: 7.5rem; 
 
} 
 

 
.ayc_de_lebe_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.ayc_gilead_img { 
 
    width: 6rem; 
 
} 
 

 
.ayc_gilead_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div class="ayc_co_container"> 
 
    <div class="ayc_co_text ayc_co"> 
 
     Eine Kooperation von: 
 
    </div> 
 
    <div class="ayc_de_lebe_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Deutsche Leberstiftung"> 
 
    </div> 
 
    <div class="ayc_de_lebe_ev_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/deutsche-leberhilfe[email protected]" alt="Deutsche Leberhilfe e.V"> 
 
    </div> 
 
    <div class="ayc_gilead_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Gilead Sciences GmbH"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-13 forethought

你不能這樣做，因爲你的形象是一個位圖圖像將如何在Web瀏覽器知道在哪裏的基準是什麼？ – Terry

元素本身是對齊的，圖像中的文本不是。 CSS不能神奇地將基於文本的元素放置在圖像中。您需要編輯圖像，以便文本與圖像底部對齊。 –

EDITED接聽/新的代碼片段：

在這個特殊的sitation的問題是，你不對齊文本，但圖像，並且在底邊框上面的一些空白的一些圖像，這是圖像的一部分，特別是在「德意志Leberstiftung」的形象。因此，實際上，您必須編輯/剪切圖像才能達到所需結果，或者使用position: relative和bottom設置來提升或降低它們，正如我在以下代碼片段中所做的那樣 - 可能仍然不完全對齊，但足以給你一個想法 - 你可以改變bottom值：

.container { 
 
    font-size: 16px; 
 
} 
 

 
.ayc_cooperation { 
 
    margin: 0 5% 0 5%; 
 
    font-size: 0.75rem; 
 
    font-weight: 300; 
 
    color: #535353; 
 
} 
 

 
.ayc_cooperation:before { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.ayc_cooperation:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 6.5rem; 
 
} 
 

 
.ayc_cooperation_ini_logo { 
 
    float: left; 
 
    width: 9.6875rem; 
 
    height: 4.5rem; 
 
} 
 

 
.ayc_cooperation_ini_logo img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.ayc_co_container { 
 
    float: right; 
 
    line-height: 8; 
 
    height: 4.5rem; 
 
} 
 

 
.ayc_co_container img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.ayc_co_container img:first-child { 
 
    width: 7.5rem; 
 
} 
 

 
.ayc_co_container img:nth-child(2) { 
 
    width: 8rem; 
 
} 
 

 
.ayc_co_container img { 
 
    margin-right: 2.5rem; 
 
} 
 

 
.ayc_co { 
 
    display: inline-block; 
 
    margin-left: 2.5rem; 
 
    font-size: 0.75rem; 
 
    line-height: 14px; 
 
    vertical-align: text-bottom; 
 
} 
 

 
.ayc_de_lebe_ev_img { 
 
    width: 8rem; 
 
\t position: relative; 
 
\t bottom: -2px; 
 
} 
 

 
.ayc_de_lebe_ev_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.ayc_de_lebe_img { 
 
    width: 7.5rem; 
 
\t position: relative; 
 
\t bottom: -4px; 
 
} 
 
} 
 

 
.ayc_de_lebe_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.ayc_gilead_img { 
 
    width: 6rem; 
 
\t position: relative; 
 
\t bottom: 0px; 
 
} 
 

 
.ayc_gilead_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div class="ayc_co_container"> 
 
    <div class="ayc_co_text ayc_co"> 
 
     Eine Kooperation von: 
 
    </div> 
 
    <div class="ayc_de_lebe_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Deutsche Leberstiftung"> 
 
    </div> 
 
    <div class="ayc_de_lebe_ev_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Deutsche Leberhilfe e.V"> 
 
    </div> 
 
    <div class="ayc_gilead_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/gilead[email protected]" alt="Gilead Sciences GmbH"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-13 18:35:12 Johannes

請注意我編輯的答案，其中代碼片段現在包含我以前只在我的答案的文本中描述爲可能性的解決方案。 – Johannes

感謝您的回覆。我沒有編輯圖像並使用display：table實現。對於移動視口，我使用display：block來替換表格實現。 – forethought

如何通過基線垂直對齊文字和圖像？

回答

相關問題