Question

我已经看过中间对齐图像旁边的单行文本的工作示例，如下所示：

<div>
    <img style="vertical-align:middle" src="testImage.png" />
    <span style="">This works</span>
</div>

但我需要将两个跨度对齐，一个在另一个之上，因为它们最终需要具有不同的样式，并且以下结果在第二个跨度中呈现在图片：

<div> <img style="vertical-align:middle;" src="testImage.png" /> <span>This doesn't work</span><br /> <span>I'm annoyed</span> </div>

注意：我确实尝试使用 float：left; 作为图像，这在某种程度上有效，但在文本足够长以至于需要时失败要扩展的div（它不会影响图像的宽度并产生不需要的文本换行）

编辑：这是根据aje给出的答案为我工作的解决方案示例，其中包含添加 vertical-align：middle; 到div标签。我将此作为编辑包含在内，而不是添加我自己的答案，因为我想将答案归功于帮助我的答案：

<div style="border: solid 2px green;"> <img style="border: solid 2px black; vertical-align: middle; width: 32px; height: 32px;" src="https://dummyimage.com/300.png/09f/fff" /> <div style="vertical-align: middle; display: inline-block"> <span>This now works properly.</span><br /> <span>Thanks for the help!</span> </div> </div>

Answer 1

下面span下的div换行是一个片段

<div>
    <img style="vertical-align:middle;" src="https://dummyimage.com/300.png/09f/fff" />
    <div style="display:inline-block"><span>This doesn't work</span><br />
    <span>I'm annoyed</span>
    </div>
</div>

Answer 2

＆＃13;

div {
  display:table;
}

div img {
  float:left;
  margin-right: 10px;
  width: 200px;
}

div p {
  display:table-cell;
  vertical-align:middle;
}

div span {
  display: block;
}

div:after { /* it's always good practice to clear floats */
  content: '';
  display: block;
  clear: both;
}

＆＃13;

<div>
    <img style="vertical-align:middle;" src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" />
    <p>
      <span>This doesn't work</span>
      <span>I'm annoyed</span>
    </p>
</div>

＆＃13;

CSS中间对齐TWO跨越图像的右侧

2 个答案: