在图像之前的中心位置显示文本[重复]答案

【问题标题】：Show a text in center location before an image [duplicate]在图像之前的中心位置显示文本[重复]
【发布时间】：2021-11-17 20:05:17
【问题描述】：

我有这个 HTML：-

<hr>
    <div style='display:flex;align-items:center'>
    <span style=''><b>Device and Operating System Selection</b></span>
    <img style='height:200px;width:120px'src='https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg'/><br/>
    </div>
    We offer 2 types of devices

结果如下：-

[![在此处输入图片描述][1]][1]

当我试图在图片中间而不是在项目顶部显示文本时，如下所示：-

【问题讨论】：

考虑使用 figcaption 而不是使用 span https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
你想要和你的图片一样的东西吗？
@Diwyansh 我希望文本显示在图片的中间而不是底部.. 检查我的编辑
我已将您的代码插入到 SO sn-p 中，输出是所需的结果......
@Sfili_81 在哪里？

标签： html css

【解决方案1】：

您只需更改添加justify-content: center; 这将使文本垂直居中对齐。 align-items:center; 是将项目水平居中对齐。

<div style='display:flex;align-items:center;justify-content: center;'>
        <span style=''><b>Device and Operating System Selection</b></span>
        <img style='height:200px;width:120px'
            src='https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg' /><br />
    </div>

【讨论】：

使用 flex-direction:column 在我的情况下没有任何效果
使用justify-content: center;将其垂直居中对齐，它将正常工作。
justify-content: center; 没有工作eiter
你在 div 中添加了justify-content: center; 吗？

【解决方案2】：

简单 ;D

<hr>
<div style="display:flex;align-items:center;">
  <span><b>Device and Operating System Selection</b></span>
  <img style="height:200px;width:120px" src="https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg"><br>
</div>
We offer 2 types of devices

【讨论】：

没有任何解释的代码很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的问题并解释它如何回答所提出的具体问题。见How to Answer。
当然@Sfili_81 我会编辑
@ŕ̷͉ge̸ḓ̶̅i̷t 我希望文本显示在图片的中间而不是底部..检查我的编辑
@johnGu 更新答案

【解决方案3】：

您可以将 align-self 样式分配给您的跨度

<div style='display:flex;align-items:center'>
<span style='align-self:center; margin-right:10px;'><b>Device and Operating System Selection</b></span>
<img style='height:200px;width:120px'src='https://i.gadgets360cdn.com/products/large/iqoo-3-db-386x800-1582613523.jpg'/><br/>
</div>
We offer 2 types of devices

【讨论】：

我希望文本显示在图片的中间而不是底部..检查我的编辑
检查我的更新答案
在我的情况下不起作用
我使用了和你一样的代码并附上了截图，那怎么可能呢？这意味着您没有使用相同的代码？