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

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -