将一些 margin-top 强制为 2 个内联块元素之一

Question

我有以下代码，它基本上是一个图像，右边有一些文本，都在同一行上。我希望文本与图像垂直居中：

|
|
img   myText here
|
|

这是我的代码

img, .info {
  display: inline-block;
}

<img src="http://placehold.it/100x150">
<span class="info">
  <span>FOO</span>
  <span>BLAH</span>
</span>

我试图对信息应用一些边距 class 但它也移动了 img。我该怎么做？

谢谢

Answer 1

只需使用vertical-align:middle

The element is placed in the middle of the parent element

img, .info {
  display: inline-block;
  vertical-align:middle;
}

<img src="http://placehold.it/100x150">
<span class="info">
  <span>FOO</span>
  <span>BLAH</span>
</span>

Answer 2

将它们放入包装器中，然后垂直对齐它们： https://jsfiddle.net/g7mk4cp0/

HTML:

<div class="wrapper">
  <img src="http://placehold.it/100x150">
  <span class="info">
    <span>FOO</span>
    <span>BLAH</span>
  </span>
</div>

CSS:

.wrapper > img, .wrapper > span {
  vertical-align: middle;
}

Answer 3

试试垂直居中对齐的方法

 .holder img{
 vertical-align:middle;
 }

<div class="holder">
<img src="http://placehold.it/100x150">
    <span class="info">
      <span>FOO</span>
      <span>BLAH</span>
    </span>

  </div>

Answer 4

如前所述，使用 vertical-align 使项目垂直居中。此外，您必须使它们成为内联块以添加填充：

img, .info {
  display: inline-block;
  vertical-align:middle;
}

.info {
    padding-left:32px;
}

<img src="http://placehold.it/100x150">
<span class="info">
  <span>FOO</span>
  <span>BLAH</span>
</span>

将一些 margin-top 强制为 2 个内联块元素之一

Force some margin-top to one of 2 inline-block elements

html

css

vertical-alignment