CODEWITHSUNDEEP
csscss-positionmargin
user2763557
user2763557

Reputation: 439

Understanding positioning: adding position absolute to img container, doesn't allow me to margin auto. Why?

I am trying to understand positioning and I get that when the parent element is positioned relatively you can position children element absolutely. At least I thought I understood this.

I proceeded to give picture element below position:absolute, however when I did this I ran into a problem where I couldn't center the image in mobile view (using media query). I tried to test the centering just normally, but I still couldn't make the image center. I used margin-left: auto and margin-right:auto under .img-circle, but that didn't work.

So I removed position:absolute on .picture class and then boom it worked. One way or another, I had to then re-position the title class.

It looks like my understanding of positioning is a bit off, could someone please help me understand why the above happened exactly? What I could have done to avoid such a mess, because it took me a while to get it. Thank you!

codepen project

/*.picture{ 
 position:absolute;
  
}*/

.img-circle{
  margin-top:10em;
  width:20em;
  height:20em;
  border:.2em solid;
  border-radius:50%;
  display:block; 
}/*image shape*/
<div class="container container-fluid contthird1">
              <div class="picture">
               <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
              </div>
              <!--end of picture-->


              <h3 id="flip">Click to slide the panel right</h3>
        
              <div class="title">
              <p class="lead">I'm a <a class="link" target='_blank' href='http://www.freecodecamp.com/map'>self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.
                <br> I'm currently part of a small web development
                <br> team in an upcoming start-up, building web and
                <br> mobile applications.
                <br>My passion is to use technology based
                <br> solutions, to help solve real world challenges.
                <br> Competences:
                <br> Languages and Frameworks:
                <br> Javascript, HTML5, CSS3, jQuery, Bootstrap3,
                <br> Angular.js, Meteor.js.
                <br> Tools & expertise:
                <br> Git, Responsive Web Design, Agile
                <br> Methodologies.</p>
              </div>

            </div>
            <!--end of container-->

Upvotes: 0

Views: 137

Answers (2)

Asons
Asons

Reputation: 87191

To answer your question, you need to use left/right, margin-left/right and a width to center an element using absolute positioning.

.picture { 
  position: relative; 
}

.img-circle {
  margin-top: 2em;
  height:20em;
  border:.2em solid;
  border-radius:50%;
  display: block; 
  position:absolute;
  /* to vertically center an absolute positioned element below is needed  */
  width: 20em;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;  
}
<div class="container container-fluid contthird1">
  <div class="picture">
    <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
  </div>
  <!--end of picture-->


</div>
<!--end of container-->

So even if that is do-able, it's likely not the best solution. What @Marcos suggest is preferable, or using text-align: center like below

.picture { 
  position: relative;
  text-align: center;
}

.img-circle {
  margin-top: 2em;
  width: 20em;
  height:20em;
  border:.2em solid;
  border-radius:50%;
}
<div class="container container-fluid contthird1">
  <div class="picture">
    <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
  </div>
  <!--end of picture-->


</div>
<!--end of container-->

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Margins works fine with relative/static elements. The use of margins for an absolute/fixed element makes no sense since the margins works betweeen elements in the same document flow. When you put position absolute you are going out of the normal flow of the document. So you need another solution to center that. This is an example of a simple global perfect center without pre-knowing the sizes of the elements:

 .img-circle {
     position: absolute;
     left: 50%;
     -webkit-transform: translateX(-50%); /* for iOS devices*/
     transform: translateX(-50%);
 }

See it working:

http://codepen.io/anon/pen/NNPLgw

Upvotes: 2

Related Questions