html - 将侧边栏中的图像居中

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;
}