position absolute left:50% 不在中间定位 span

Question

我有一个环绕 div，在里面我有一个 <span> 相对于环绕的绝对位置，因为它是来自 Icomoon 的图标，我需要成为背景的一部分。然后，在与 <span>、另一个 div 相同的级别，在这个里面我有一个 <h1>、一个 <p>、一个 <input> 和一个 <span>.

我已经将<span>绝对定位到换行（它有相对位置），但是虽然我想把它放在中间，但它只需要left:26%，这不是50%！所以当我调整屏幕大小时，问题就变成了，它不会停留在换行的中间。

我就纳闷了，为什么会引起呢？不久前我 post 编辑了另一个 post 因为我想在 JSFiddle 中包含这个问题但是我不知道如何在 JSFiddle 中包含字体文件所以图标不会出现在那里.

有没有人知道我可以做些什么来修复它？

.containerOfSites {
  display: block;
  height: auto;
  float: none !important;
  margin: 0 auto;
}

.wrapPortalItem {
  padding: 0;
}

.insideWrapItem {
  text-align: center;
  border: 3px solid black;
  padding: 15px;
  position: relative;
}

.portalItem {
  background-color: rgba(255, 255, 255, 0.75);
  padding-top: 3%;
  padding-bottom: 10%;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}

.portalItem p {
  margin-bottom: 40%;
  font-size: 30px;
  padding: 5px;
}

.portalItem p>span {
  font-weight: 900;
}

.portalItem span.viewMorePs {
  text-decoration: none;
  font-size: 18px !important;
  z-index: 999;
}

.portalItem h1 {
  color: #B5D803;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #fff;
}

.insideWrapItem span[class^="iconI-"] {
  position: absolute;
  color: white;
  bottom: 12%;
  left: 26%;     /* <- */
  font-size: 14em !important;
}

<div id="portalPage" class="col-md-24">
  <div class="containerOfSites col-md-18 col-sm-24">
    <div class="wrapPortalItem col-md-8">
      <div class="insideWrapItem">
        <span class="iconI-iconDA_automotive img-responsive"></span>
        <div class="portalItem portA ">
          <h1>AUTOMOTIVE</h1>
          <p>web sites<br /> for the<br /> <span> automotive<br /> </span> market</p>
          <a href="http://motors06.denison-automotive.co.uk/denison/"><span class="viewMorePsGreen">GO</span></a>
        </div>
      </div>
    </div>

    <div class="wrapPortalItem col-md-8">
      <div class="insideWrapItem">
        <span class="iconI-iconDA_web"></span>
        <div class="portalItem">
          <h1>DESIGN</h1>
          <p>web sites<br /> for the small &<br /> large business<br /> for<span> all sectors</span></p>
          <a href="http://motors06.denison-automotive.co.uk/denison/denison-2/web-sites/"><span class="viewMorePsGreen">GO</span></a>

        </div>
      </div>
    </div>
    <div class="wrapPortalItem col-md-8">
      <div class="insideWrapItem">
        <span class="iconI-iconDA_yourbrand"></span>
        <div class="portalItem">
          <h1>BRANDING</h1>
          <p><span>branding<br /> </span> and<br /> design</p>

          <a href="http://motors06.denison-automotive.co.uk/denison/denison-2/branding/"><span class="viewMorePsGreen">GO</span></a>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

Answer 1

要将绝对元素居中放置，您可以使用此 CSS:

left:0;
right:0;
margin:0 auto;

就像这个例子：http://jsfiddle.net/ucjt51Lc/

left:50% 将不起作用，因为元素从左上角而不是中心对齐。

Answer 2

如果不看一些代码就很难说清楚，但我猜你的问题是你的左边缘位于 50%，但你希望的中心位于它父级的中心？

在跨度上尝试这样的东西（除了任何其他样式）：

span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

这应该将其自身宽度的一半移动（翻译）到左侧。

Answer 3

请在 jsFiddle 中包含字体文件。左侧有一个面板，单击“外部资源”，将字体的 URL 粘贴到那里，然后单击加号。（我想将其添加为评论，但 Whosebug 不允许，因为我还没有获得 50 点声望...）

position absolute left:50% 不在中间定位 span

position absolute left:50% does not position span in the middle

html

css

absolute