我有一个包装 div,里面有一个 <span>
绝对定位到换行,因为它是 Icomoon 的图标,我需要成为背景的一部分。然后,与 <span>
处于同一级别,另一个 div,在里面我有一个 <h1>
, 一个 <p>
, 一个 <input>
和一个 <span>
.
我已经定位了 <span>
absolute 到换行(它有相对位置),但虽然我想把它放在中间,但它只需要 left:26%,根本不是 50%!所以当我调整屏幕大小时,问题就变成了,它不会停留在换行的中间。
我就纳闷了,为什么会引起呢?我刚才发布了另一篇文章,因为我想将这个问题包含在 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>
最佳答案
如果没有看到一些代码很难准确说出,但我猜你的问题是你的左边缘位于 50%,但你希望它的中心位于它父级的中心?
在 span 上尝试这样的东西(除了任何其他样式):
span {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
这应该将它自己宽度的一半移动(翻译)到它的左边。
关于html - 位置绝对左边 :50% does not position span in the middle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32206116/