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中的垂直中間對齊圖像和文本並排

回答

相關問題