首页 > 解决方案 > 如何定位和 img 和 text 并将它们放在 html 中?

问题描述

我正在为我的 Ebay 商店创建一个模板,所以我只有样式标签可以使用。我已经并排管理了文本和 img,但它们留在左边,我需要它们在中间。

任何帮助深表感谢。

谢谢

当前代码:

<div style="text-align: center;" display="flex;" align-items="center">
    <h1 style="text-align: center; font-family: 'Times New Roman', Times, serif; font-size: 3em; color: black;">
        <b>text</b>
    </h1>
    <img src="url" width="3%;">
   </div>

我需要放在一起的东西并不多——所以我只是使用样式标签保持简单。

标签: html

解决方案


我想你想要这样的东西:

<div style="display: flex; flex-direction: row; flex-wrap: nowrap;">
  <div style="flex:1 0 auto; width:48%; margin-right:2%; text-align:right;  background-color:#aa4444; ">
    <h1 style="margin-top:0px">
        This is the title
    </h1>
    This is the description.<br/>
    You only need to remove the background-color property.
  </div>
  <div style="flex:1 0 auto; width:48%; margin-left:2%; background-color:#77aa77;">
    <img src="https://picsum.photos/200/180">
  </div>
 </div>


推荐阅读