相对于图像垂直居中的文字

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>

have a look here: it is the site I am building

只要页面足够宽，它就可以很好地工作，但是当屏幕较小时，文本将位于图像的顶部。

显然，我希望文字保留在徽标的右侧。我了解我需要在中添加图片，但文字不会垂直居中...那么谁能在这里为我提供帮助？

Thanx，

Thom

Answer 1

我认为问题在于文本居中对齐，并且在较小的视图中，宽度百分比较大。如果仍要使用此方法，请向左尝试：calc（50％+ 74px）或图像宽度所需的px。