如何将img水平居中于div旁边的跨度？

As the title says, I would like to center an img in a div with a span beside it. The HTML is as follows:

正如标题所说，我想把一个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>

This is as far as I've gotten: https://jsfiddle.net/qhpfoqng/2/. As you can see, it centers BOTH as if they were one element, when I really just want it to center the img only. The end product should have the img centered horizontally in the div with the span to the right of it.

这是我得到的：https：//jsfiddle.net/qhpfoqng/2/。正如你所看到的，当我真的只想让它仅仅以img为中心时，它就像把它们作为一个元素一样集中在一起。最终产品应该在div中水平居中，其右侧为跨度。

3 个解决方案

#1

Just remove the span from the document flow by setting position: absolute; and then use some CSS magic to position it where you want it to be:

只需通过设置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>

For that method to work, the surrounding div needs to be positioned (any position value other than the default static).

要使该方法起作用，需要定位周围的div（除默认静态之外的任何位置值）。

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

#2

Add the css as follows:

添加css如下：

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

jsFiddel Demo

jsFiddel演示

#3

You can do this:

你可以这样做：

Give width in percentage to your image
为图像指定宽度百分比
Then add margin-left also in percentage in way margin-left = 100% - image_width / 2
然后以百分比形式添加margin-left-margin-left = 100％ - image_width / 2

For this example, I used width: 40%, that means 100% - 40% / 2 = 30%; so margin-left: 30%, and that will center your image.

对于这个例子，我使用宽度：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%;
    }

#1