html - 如何定位和 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>
我需要放在一起的东西并不多——所以我只是使用样式标签保持简单。
解决方案
我想你想要这样的东西:
<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>
推荐阅读
- tensorflow - 如何在 tensorflow2.0 中导入“tf.contrib.seq2seq.dynamic_decoder”?
- node.js - 一个 GET 请求,但被 express、node.js 中的多个 .get 函数捕获
- sql - 根据条件设置组中一条记录的值 - SQL Server
- python - SMTPAuthenticationError:(535,b'5.7.8 Django 生产中不接受用户名和密码?
- ios - +[FIRAnalytics setAnalyticsCollectionEnabled:]:发送到类的无法识别的选择器
- node.js - 全栈 javascript 应用程序共享接口
- java - 如何理解一个网站正在使用 gzip 压缩?
- opencv - 为什么我的视差图的边缘这么肥?
- sql - 如何在sql中获取日期范围内的数据
- java - 复制到剪贴板的 JavaFX 字符串以空字符 '\u0000' 开头被截断