如何将img水平中心放置在旁边有跨度的div中？

Question

正如标题所说，我想把一个img放在一个div的中间，它旁边有一个跨度。HTML如下：

<div>
    <img src="http://www.openwebanalytics.com/wp-content/plugins/owa/modules/base/i/browsers/128x128/ie4.png">
    <span>Text</span>
</div>

这就是我所得到的：https://jsfiddle.net/qhpfoqng/2/。正如你所看到的，当我真的希望它只集中于img的时候，它的中心就好像它们是一个元素一样。最终产品应使img水平中心在div中，其跨度应在其右侧。

Answer 1

只需通过设置span从文档流中删除position: absolute;，然后使用一些CSS魔术将其定位到您希望它位于的位置：

​

div {
  width: 350px;
  text-align: center;
  position: relative;
  border: 1px black solid;
}

img {
  vertical-align: middle;
}

span {
  font-size: 200%;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div>
  <img src="http://www.openwebanalytics.com/wp-content/plugins/owa/modules/base/i/browsers/128x128/ie4.png">
  <span>Text</span>
</div>

​

要使该方法工作，需要对周围的div进行定位(除默认static之外的任何位置值)。

https://jsfiddle.net/qhpfoqng/4/

Answer 2

添加css如下：

div {
  margin:0 auto;
  width: 350px;
  text-align: center;  
  border: 1px black solid;     
}

jsFiddel演示

Answer 3

你可以这样做：

1. 将宽度以百分比表示为图像
2. 然后加上边距-左(按百分比计算)，边距-左= 100% - image_width / 2

在这个例子中，我使用了宽度: 40%，这意味着100% - 40% /2= 30%；所以边距-左: 30%，这将使您的图像中心化。

    div {
      width: 350px;

      border: 1px black solid;
    }

    img {
      width: 40%;
      margin-left: 30%;
      vertical-align: middle;
    }

    span {
      font-size: 200%;
    }