html - Image is not centered with background -
i centering image in following code center background fades.i have managed put image in center background color. how fix ? please tell how position image well?
html
<section id="contact"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-5 centered"> <img src="something.jpg" alt=""> </div> </div> </div> </section>
css
#contact { background-color:black; } .container { text-align: center; position:absolute; margin:0; padding:0; top:50%; left:50%; transform: translate3d(-50%, -50%,0); } #contact .centered { float:none; margin:0 auto; } #contact img { border-radius:50%; border: 4px solid #fff; }
if give outer position absolute , container position relative , can , left, top 50% values, make them in outer div because put them 1 within other
#contact{ background-color: black; position: absolute; top: 50%; left: 50%; } .container { text-align: center; position: relative; margin: 0; padding: 0; top: 50%; /* left: 50%; */ /* transform: translate3d(-50%, -50%,0); */ }
Comments
Post a Comment