新手上路，请多包涵

我正在尝试使用两个 div 连续打印图像和文本。

到目前为止我已经获得了这个输出：

sample text

但是我需要在图像之后的中间显示文本，而不是在底部。

HTML

 <body>
    <div id="qr" style="display:inline-block; min-width:2.2cm; height:3.8cm; align: center;" >
        [ image_url  ]
    </div>
    <div style="display:inline-block; min-width:3.8cm;">
        sample text
    </div>
</body>

CSS

 body{
    width:21.1cm;
    height:29.8cm;
    background-color: white;
    margin-top:0.4cm;
}

图像是 qr code 。所以我不能使用 table 方法
div 在 foreach 方法中使用。所以不能改变尺寸。我怎么能够？

原文由 m2j 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css

阅读 288

2 个回答

得票最新

社区维基

发布于
2022-12-19

✓ 已被采纳

你在追求这样的东西吗：

 <div id="qr" style="display:inline-block; min-width:2.2cm; height:3.8cm; align: center;vertical-align: middle;" >
  <img src="http://i.stack.imgur.com/25Rl3.jpg" style="height:3.8cm;">
</div>
<div style="display:inline-block;vertical-align: middle;">
  sample text
</div>

原文由 Peyman Mohamadpour 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-19

我这样做的方式：

通过使用弹性：

 <div class="one">
    <div>
        <img src="http://placehold.it/300x150" />
    </div>
    <div>
        sample text
    </div>
</div>

CSS：

 .one {
    display: flex;
    align-items: center;
}

原文由 Jitesh Narula 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Stack Overflow 翻译

子站问答

访问

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

CSS中并排垂直中间对齐的图像和文本

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译