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>

据我所知：CollectionViewWaterfallLayout。正如你所看到的那样，它将BOTH中心当作一个元素，当我真的只想让它仅仅以img为中心时。最终产品应该在div中水平居中，其右侧为跨度。

Answer 1

只需设置span即可从文档流程中删除position: absolute;，然后使用一些CSS魔法将其定位到您希望的位置：

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

要使该方法有效，需要定位周围的div（除默认static以外的任何位置值）。

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

Answer 2

按如下方式添加css：

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

jsFiddel Demo

Answer 3

你可以这样做：

为您的图片提供宽度百分比
然后以百分比的方式添加 margin-left margin-left = 100％ - image_width / 2

对于此示例，我使用宽度：40％，这意味着 100％ - 40％/ 2 = 30％;所以 margin-left：30％，这将使您的形象居中。

    div {
      width: 350px;

      border: 1px black solid;
    }

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

    span {
      font-size: 200%;
    }

如何将一个img水平居中在div旁边？

3 个答案: