CSS中并排垂直居中对齐的图像和文本答案

【问题标题】：vertical middle aligned image and text side-by-side in CSSCSS中并排垂直居中对齐的图像和文本
【发布时间】：2021-11-07 15:02:35
【问题描述】：

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

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

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 方法中使用。所以不能改变尺寸。我怎样才能？

【问题讨论】：

垂直对齐：中间；不工作？
Trix 下面有你的答案

标签： html css

【解决方案1】：

你是否在追求这样的事情：

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

【讨论】：

节省了我的时间。谢谢。但是，是否可以手动对齐文本位置？
欢迎您。你说的手动是什么意思？如果您认为这不是所需的确切输出，请花一些时间并编辑您的问题以实现所需的输出，并让人们为此编辑或添加新答案

【解决方案2】：

<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>

或

<div>
    <img style="float: left; margin: ...;" ... />
    <p style="float: right;">Text goes here...</p>
</div>

See this post 或

W3Schools

【讨论】：

【解决方案3】：

在文本 div 中添加以下样式

height:3.8cm;
line-height:3.8cm;

【讨论】：

【解决方案4】：

我的做法：

通过使用弹性：

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

CSS：

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

【讨论】：

【解决方案5】：

这适用于我的项目，我有很多图像，不喜欢太多的 div 和更少的代码：

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

.test img {height:50px;width:auto;margin-bottom:-20px}

jsfiddle.net

【讨论】：