Question

我尝试在居中文字的左侧显示图像！但我唯一做的就是将图像+文本居中！我只希望文本水平居中，然后左边的图像和垂直居中

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

Answer 1

您需要使用命令

Float: left;

你不使用stylesheet.css或其他什么？我建议使用它，所以你不必在html文件中做样式，而是在一个扩展文件中。

Answer 2

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

你可以尝试这个

Answer 3

我为你创建了一个例子......但为此你必须要有图像高度值。

Stack Snippet

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

中心文本左侧的Css图像

3 个答案: