I try to display an image on left of a centered text ! But the only thing i did is to center the image + text ! i want only the text to be centered horizontally and then image on his left and both centered vertically
<div id="the-block"><div class="titleproduct" style="text-align: center;"><img itemprop="image" src="large.png" id="theimage" alt=""align="middle">BLablaba</div></div>
You need to use the command
Float: left;
Dont you use a stylesheet.css or something? I recommend to use that, So you dont have to do the style in the html file but in a extendent file.
<div id="the-block">
<div class="titleproduct" style="text-align: center;">
<p>Some text...</p>
</div>
<div class="image" style="float:left">
<img itemprop="image" src="large.png" id="theimage" alt=""align="middle">BLablaba
</div>
</div>
you can try this one
I created a example for you...but for that you must need the image height value.
Stack Snippet
.titleproduct { position: relative; top: 75px; /* Just half of image height */ } img#theimage { position: absolute; left: 0; transform: translateX(-100%) translateY(-50%); top: 50%; } div#the-block { display: flex; justify-content: center; align-items: center; }
<div id="the-block"> <div class="titleproduct" style="text-align: center;"><img itemprop="image" src="http://via.placeholder.com/150x150" id="theimage" alt="" align="middle"> <p>BLablaba</p> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.