css - Understanding positioning: adding position absolute to img container, doesn't allow me to margin auto. Why? -
i trying understand positioning , when parent element positioned relatively can position children element absolutely. @ least thought understood this.
i proceeded give picture element below position:absolute, when did ran problem couldn't center image in mobile view (using media query). tried test centering normally, still couldn't make image center. used margin-left: auto
, margin-right:auto
under .img-circle
, didn't work.
so removed position:absolute
on .picture
class , boom worked. 1 way or another, had re-position title class.
it looks understanding of positioning bit off, please me understand why above happened exactly? have done avoid such mess, because took me while it. thank you!
/*.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 slide panel right</h3> <div class="title"> <p class="lead">i'm <a class="link" target='_blank' href='http://www.freecodecamp.com/map'>self taught</a> web designer, developer, co-founder , entrepreneur based in finland. <br> i'm part of small web development <br> team in upcoming start-up, building web , <br> mobile applications. <br>my passion use technology based <br> solutions, solve real world challenges. <br> competences: <br> languages , 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-->
margins works fine relative/static elements. use of margins absolute/fixed element makes no sense since margins works betweeen elements in same document flow. when put position absolute
going out of normal flow of document. need solution center that. example of simple global perfect center without pre-knowing sizes of elements:
.img-circle { position: absolute; left: 50%; -webkit-transform: translatex(-50%); /* ios devices*/ transform: translatex(-50%); }
see working:
Comments
Post a Comment