[英]Css image on left of centered text
我尝试在居中文本的左侧显示图像! 但是我唯一要做的就是将图像+文本居中! 我只希望将文本水平居中,然后将图像放在他的左侧,而将两者都垂直居中
<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>
您需要使用命令
Float: left;
您不使用stylesheet.css之类的东西吗? 我建议使用该样式,因此您不必在html文件中而是在扩展文件中进行样式设置。
<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>
你可以试试这个
我为您创建了一个示例...但是为此,您必须需要图像高度值。
堆栈片段
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.