центрирование изображений на боковой панели

Question

пытается сделать лучшие практики здесь, и я новичок в кодировании. У меня два изображения в правой боковой панели. Боковая панель выглядит хорошо (окрашивается в красный цвет, чтобы я мог видеть, что происходит), но я не могу получить два изображения, центрированных в столбце. Что случилось с моим css?

HTML:

<div class="right_bar"> 
 
\t \t <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"> 
 
    \t <div><img src="images/nav_images/usitt.png" alt="Sponsored in part by USITT";>  
 
\t \t </div> 
 
    </div>

CSS:

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

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

Answer 1

Вы должны display: block на изображениях для margin: 0 auto работать:

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

Или вы могли бы попробовать text-align: center на контейнере:

.right_bar { 
    text-align: center; 
} 

Answer 2

использования display:inline, чтобы получить его в той же колонке ...

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

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