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

我试图用两个div s连续打印图像和文本。CSS中的垂直中间对齐图像和文本并排

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

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

来源

2016-01-30 m2j

垂直对齐：中间;不起作用？ –

下面是你的答案Trix –

你这样的事情后：

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

来源

2016-01-30 12:45:12 Trix

救了我的日子。谢谢。但是，是否可以手动对齐文本位置？ – m2j

欢迎光临。笏你的意思是手动？如果您认为这不是确切的期望输出，请投入一些时间并编辑您的问题以实现期望的输出并让人们编辑或添加新的答案 – Trix

<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

来源

2016-01-30 12:33:22 djl

种添加以下样式的文本DIV

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

来源

2016-01-30 12:36:09

没有增加文字下方的空间 – m2j

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

回答

相关问题