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>

我尝试将一些保证金应用于info类，但它也会移动img。我该怎么办？

由于

Answer 1

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

＆＃13;

img, .info {
  display: inline-block;
  vertical-align:middle;
}

.info {
    padding-left:32px;
}

＆＃13;

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

＆＃13;

Answer 2

只需使用vertical-align:middle

即可

元素位于父元素
的中间

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 3

将它们放入包装中，然后垂直对齐它们： 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 4

尝试垂直对齐中间方法

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

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

4 个答案: