将图像置于侧边栏中

Question

尝试在这里做最佳实践，我是编码的新手。我在右侧边栏中有两张图片。侧边栏看起来很好（将其着色为红色，这样我就可以看到了什么）但我无法将两个图像放在一列中心。我的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;
}

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 {
	position:absolute;
	right:0;
	width: 20%;
	background-color: red;
	
}

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