Html 相对于图像垂直居中文本

我正在建立一个网站，希望在页面顶部有该组织的徽标，包括名称旁边的垂直居中

这是我目前正在使用的代码：

<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>

阿姆斯特丹罗兹维林根福音酒店

只要页面足够宽，它就可以很好地工作，但是当屏幕变小时，文本会出现在图像的顶部

显然，我希望文本保持在徽标的右侧。我知道我需要在中包含图像，但是文本没有垂直居中。。。谁能帮我

Thanx

---

Thom

我认为问题在于文本与中心对齐，在较小的视图中，宽度百分比较大。如果您仍然需要此方法，请尝试左键：calc（50%+74px）或图像宽度所需的px。

寻求代码帮助的问题必须包含在问题本身中重现所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。看，我试过了，但没用：整个文本块移到左边，离开了页面。根据W3C，您只能对div的宽度使用calc（）。好的，我看到了问题，请在值和“+”之间键入一个空格马克，所以不是50%+100px，而是50%+100px。如果不起作用，我仍然有一些想法，但这些想法需要一些重构。我尝试了这个方法，它很有效：对于任何想使用它的人：小心在+符号前后添加空格。对你来说是个大问题，罗纳德。没什么：），只要小心chrome和firefox以外的其他浏览器。可能会有除了谷歌的前缀外，你还可以使用谷歌