13

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>
YakovL
  • 7,557
  • 12
  • 62
  • 102
eve_mf
  • 795
  • 3
  • 12
  • 36

3 Answers3

48

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.

thecraighammond
  • 800
  • 6
  • 10
  • you are my god!!!! Thank you!!! It works perfectly!!! (I am going to check what transform does because although your explanation sounds logic I do not understand :S I've though when you say for example left:20% is it always 20% of its parent! – eve_mf Aug 25 '15 at 14:09
  • 3
    Essentially you can apply a variety of styles to an element to, well, transform it. So in this respect, translate means to move it about an axis. We're using translateX which moves it along it's X axis (in this case backwards by 50%). A translate is relative to itself (whereas left: 50% will be relative to it's parent) so 50% is half it's own width. You could also apply translate(-50%, -50) which would center both vertically and horizontally (both along the X and Y axis). Worth looking in to everything css3 as it's incredibly powerful now, but keep browser support in mind ( check caniuse.com). – thecraighammond Aug 25 '15 at 15:30
4

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.

Hauke
  • 419
  • 2
  • 6
  • 18
0

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...)

Arpad Pacsa
  • 91
  • 1
  • 8
  • It is what I've been trying to do, the files are physically files, where do I take their URL from? So Icomoon, when you generate your icons, gives you them in a zip, with a .css and 4 files; icomoon.eot, icomoon.svg, icomoon.woff, and icomoon.ttf. I didn't have a problem adding the css (obvious) but I didn't know how to add those files as external file!!! Anyway, thecraighammond solved my problem perfectly! – eve_mf Aug 25 '15 at 14:40