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

Question

I have a wrap div and inside I have a <span> position absolute to the wrap as it is an icon from Icomoon and I need to be part of the background. And then, at the same level that the <span> , another div, and inside this I have a <h1> , a <p> , an <input> and a <span> .

I have positioned the <span> absolute to the wrap (which it has position relative), but although I want to put it in the middle, it just needs left:26%, which is not 50% at all! So the problem becomes when I resize the screen, that it doesn't stay in the middle of the wrap.

I was wondering, why can it be caused? I posted another post a while ago because I wanted to include this problem in a JSFiddle but I couldn't work out how to include the fonts files in the JSFiddle so the icons don't appear there.

Does anyone has a slight idea about what can I do to fix it?

 .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

It's difficult to say exactly without seeing some code, but I'd guess your problem is the the left edge of your is sitting at 50% but you want the center of the to sit in the center of it's parent?

Try something like this on the span (in addition to any other styles):

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

This should move (trasnlate) the half of it's own width to it's left.

Answer 2

To position an absolute element centered, you can use this CSS:

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

like in this example: http://jsfiddle.net/ucjt51Lc/

left:50% will not work because the element is aligned from the top left corner, not the center.

Answer 3

Please include the font files in jsFiddle. There is a panel on the left side, click on External Resources, paste there the URL of the font and click the plus sign. (I wanted to add this as a comment, but StackOverflow hasn't allowed it, because I have not earned 50 reputation points yet...)