SVG img 内联多行文本"block"

Question

我的问题主要类似于这个:SVG在内联块容器的同一行文本上

我有一个SVG图像,我想建立在文本,这"displaces"左边的文字。文本至少有两行长，如果重要的话，它是<h1>。

我已经尽力了:

• 设置高度和/或宽度，就像刚才的问题一样
• 将其括在段落中(<p>)
• 在指定宽度和/或高度的div中进行换行
据https://stackoverflow.com/a/64892423
• 我试图添加justify-self: start;——没有任何影响…

如何解决这个基本问题?谢谢你的帮助。

<div class=company-content>
<p>
<div style="width:10%; height:10%; display:inline-grid;">
<img src="graphics/filenamehere.svg" style=" display:inline-flex; height:3rem;" /> 
</div>
<h1>Lorem Ipsum Text here</h1>
</p>

<标题>

更新最小可复制示例:

/* Add a random picture */
var img = document.createElement('img');
img.src = 'https://unsplash.it/200/300/?random';
document.body.appendChild(img);
/* Add some lorem ipsum text next to  the picture */
var lorem = document.createElement('div');
lorem.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nunc eget euismod tincidunt, nunc nisi tincidunt augue, nec consectetur nunc nisi eu nunc. Nullam eget nunc eu nisl sagittis porttitor. Nullam euismod, nunc eget euismod tincidunt, nunc nisi tincidunt augue, nec consectetur nunc nisi eu nunc. Nullam eget nunc eu nisl sagittis porttitor.';
document.body.appendChild(lorem);
/* Make the picture sit on the left side of the text inline with the text */
img.style.float = 'left';
/* Make the text a h1 header */
lorem.style.fontSize = '1.5em';
lorem.style.fontWeight = 'bold';

这可以工作，但不是在我的代码中，它使用h1标签…

<标题>更新2 h1> 的不正常工作的代码:

.company-content {
width: 79%;
display: inline-grid;
/*margin-left: 75px;*/
}

<div class=company-content>
<p>
<div style="width:10%; height:10%; display:inline-grid; float:left;"><img src="https://picsum.photos/500" style=" display:flex; width:3rem; height:3rem; align-items:center; float:left;" /> </div>Lorem Ipsum blablabla bla bla bla bla</p>

Answer 1

根据您的要求使用图像和文本同一行的代码。

<div class=company-content>
<p>
<div style="width:60%; height:10%; display:flex; align-items: center;    justify-content: center;
margin: 0 auto;">
<img src="graphics/filenamehere.svg" />
<h1 style="margin: 0;">Lorem Ipsum Text here</h1>
</div>
</p>
</div>