Centering Pictures in CSS

Question

Need help centering these images in CSS

I have been trying to center them by using a div id tag

<div id="centerLeftAboutPic">
  <div class="single-about-detail clearfix">
    <div class="about-img">
      <img src="img/AttyRLev.jpg" alt="">
    </div>

    <div class="about-details">
      <div class="pentagon-text">
        <h1>R</h1>
      </div>

      <h3>Atty Rob Lev</h3>
      <p>Click here to learn more about robert lev</p>
    </div>
  </div>
</div>

I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.

#centerLeftAboutPic {
  float: right;
  width: 320px;
  padding-left: 30px;
  position: relative;
}

I am new to web developing so I am still confused on positioning. Thank you.

Flexbox is good for centering: http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Mar 19 '16 at 12:29

repzero · Accepted Answer · 2016-01-01T18:36:43.513

1

You can use the below in your css

text-align:center

snippet

#centerLeftAboutPic {
      text-align:center;
       padding-left:30px;
       position: relative;
       border:solid black;
}
img{
  width:50px;
  height:50px;
  margin-left:70px;
}

<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
 <div>
</div>

edited Jan 01 '16 at 18:36

answered Dec 31 '15 at 22:51

repzero

8,254
2
18
40

That worked well but i wold like to have a larger margin between both of the pictures. I tried to add a margin-left: 10px; but nothing happened – kkkkkkkkkkkkkkkkkkkkkkk Jan 01 '16 at 18:26
add margin-left to the img selector...see my edited answer...note: If you use a fixed width for your div and apply a margin to your image..this will shift your image to the right and some of the margin will be hidden behind the div..this is due to the overflow hidden property....if you not apply a width to your div, that div container will adjust to the image margin and center all images in the middle...see edited answer – repzero Jan 01 '16 at 18:40

score 0 · Answer 2 · answered Dec 31 '15 at 22:47

If you want to center the image relative to its container then all you need to do is add this to its CSS.

#centerLeftAboutPic img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.

Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/

If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/

#centerLeftAboutPic {
  width: 320px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Centering Pictures in CSS

2 Answers2