Question

我正在尝试使用两个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方法。所以不能改变维度。我怎么能够？

Answer 1

你是否喜欢这样的事情：

＆＃13;

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

＆＃13;

Answer 2

created: {
   timezone: {
      name: "America/New_York",
      location: {
         country_code: "US",
         latitude: 40.71417,
         longitude: -74.00639,
         comments: "Eastern Time"
      }
   },
   offset: -18000,
   timestamp: 1454125056
},

OR

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

See this post或

W3Schools

Answer 3

将以下样式添加到文本div

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

Answer 4

我的操作方式：

使用flex：

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

CSS：

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

Answer 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

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

5 个答案: