Arrange text relative to the image [closed]

There are an infinite number of ways to align the logo, relative to the company name, and they are limited only by our imagination.

In order to accurately answer the question, I used exactly the layout that the author provided, but if you go beyond it, then perhaps the original problem was not even there.

However, I want to note that in spite of the fact that I used the layout of the author of the question, his result may differ due to the imposition of his previously written styles.

In order to prevent this from happening, I recommend that the author of the question specify classes and identifiers for objects and be more careful in choosing selectors when drawing up CSS rules.

Negative margin

Specify a negative indent from the bottom, thereby shifting "under the line" on which the image is located.

 <h1> <a href="site.ru" id="logo"> <img src="https://i.stack.imgur.com/IvEH3.png" alt=""/> Здесь должен быть текст </a> </h1> <style> h1 img { margin-bottom: -30px; } </style> 

Result:

vertical image alignment

Specify that the image should be aligned in the middle of the line.

 <h1> <a href="site.ru" id="logo"> <img src="https://i.stack.imgur.com/IvEH3.png" alt=""/> Здесь должен быть текст </a> </h1> <style> h1 img { vertical-align: middle; } </style> 

Result:

logo offset using transform

more complicated here.
similar to the first option, just shift relative to the string using the trendy transform property

 <h1> <a href="site.ru" id="logo"> <img src="https://i.stack.imgur.com/IvEH3.png" alt=""/> Здесь должен быть текст </a> </h1> <style> h1 img { transform: translateY(39%); } </style> 

Result:

positioning + stretching

it's still harder and without doping, not everyone can figure it out
indicate that the image is absolutely positioned relative to the parent object
indicating zero distance to the borders of the parent object, stretch it to 100% of the parent height
after specifying automatic indentation at the top and bottom, the image is positioned along the center line of the parent object
because the image is positioned absolutely, it enters the text
to fix we will add an internal indent to the parent object and an external image
indentation should be equal to the width of the image

 <h1> <a href="site.ru" id="logo"> <img src="https://i.stack.imgur.com/IvEH3.png" alt=""/> Здесь должен быть текст </a> </h1> <style> h1 a { position: relative; padding-left: 200px; } h1 img { position: absolute; top: 0; bottom: 0; margin: auto 0; margin-left: -200px; } </style> 

Result:

You can continue indefinitely, but the sophistication of the answers will increase.
Again, I stress that if you change the layout, you could get rid of more simple techniques.
Not the point

If the methods described above do not suit you, it means that the problem lies outside the code you specified and there you did what you shouldn’t do.
And the probability of this is quite high, because You have already complained that the answers given to you previously do not suit you, despite the fact that they work perfectly in an isolated environment. So I did not get involved with the "infinite list" and decided to wait for the reaction of the author of the question.
Check and unsubscribe by result

If the answer does not fit, but you provide a sufficient amount of source data, we will always help you.