相對於圖像垂直居中文本

Question

我正在構建一個網站，並且喜歡在頁面頂部顯示組織的徽標，包括其旁邊垂直居中的名稱。

這是我目前使用的代碼：

<div style="height: 10em; position:relative;">
<div>
<img style="float: left; margin: 25px 25px 25px 0;" src="images/svg/erv.svg" alt="ERV logo 2020" width="74" height="100" />
</div>
<h1 style="margin:0;position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%) ">
Evangelische Roze Vieringen Amsterdam</h1>
</div>

看看這里：這是我正在建設的網站

只要頁面足夠寬，它就可以很好地工作，但是當屏幕較小時，文本會出現在圖像的頂部。

顯然，我希望文本保持在徽標的右側。 我知道我需要在 中包含圖像，但是文本不會垂直居中...所以誰能在這里幫助我？

謝謝，

湯姆

Answer 1

我認為問題在於文本與中心對齊，並且在較小的視圖中寬度百分比更大。 如果您無論如何都想要此方法，請嘗試 left: calc(50% + 74px) 或您想要的圖像寬度的 px。