centering images within a sidebar

Question

trying to do best practices here and I'm new to coding. I have two images in a right sidebar. Sidebar looks good (colored it red so I could see what's up) but I can't get the two images centered in a column. What's wrong with my css?

html:

<div class="right_bar">
  <div class="sponsor_button"><img src="images/nav_images/uconn-grant-logo.png" alt="Sponsored in part by the University of Connecticut's Research Grant";></div class="sponsor_button">
     <div><img src="images/nav_images/usitt.png" alt="Sponsored in part by USITT";>      
  </div>
    </div>

css:

.right_bar {
 position:absolute;
 right:0;
 width: 20%;
 background-color: red;
 
}

.sponsor_button img {
 margin-left:auto;
 margin-right:auto;
}

possible duplicate of [Center align image within div horizontally](http://stackoverflow.com/questions/10989238/center-align-image-within-div-horizontally) — Stephen Ó Connor, May 14 '15 at 17:36

score 3 · Accepted Answer · answered May 14 '15 at 17:03

3

You need display: block on the images for margin: 0 auto to work:

.sponsor_button img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Or you could try text-align: center on the container:

.right_bar {
    text-align: center;
}

answered May 14 '15 at 17:03

Kevin Boucher

16,426
3
48
55

score 0 · Answer 2 · answered May 14 '15 at 17:07

0

use display:inline to get it in the same column...

.right_bar {
 position:absolute;
 right:0;
 width: 20%;
 background-color: red;
 
}

.sponsor_button img {
        display:inline;
 margin-left:auto;
 margin-right:auto;
}

answered May 14 '15 at 17:07

Subin S V

137
2
12

centering images within a sidebar

2 Answers2