将侧边栏中的图像居中

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

将侧边栏中的图像居中

centering images within a sidebar

html

css

sidebar