如何在 <div className="col"> 中将 img 向右对齐

Question

我正在尝试将图像与 div 列的右侧对齐。 如您所见，它需要稍微向右调整。

<div className="main-footer">
<div className="footer-container">
<div className="row">
   <div className="col">
       <h5>GitHub</h5>
       <Navbar.Brand href="https://github.com/">
       <img className="logo-position" src={githublogo} style={{ width: 
        100, height: 100 }} />
       </Navbar.Brand>
   </div>
</div>
</div>
</div>

.main-footer {
  color: white;
  background-color: #282c34;
  padding-top: 3em;
  padding-left: 3em;
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
}

我尝试在“logo-position”中添加一些 CSS 来修复它，但没有成功。从我在网上找到的答案中我尝试过：

position: absolute;
right: 38%;

text-align: right;

display: block;
margin-left: auto;
margin-right: auto;

绝对位置在开始时就像我想要的那样工作，但是一旦窗口大小发生变化，它就会移出位置。

我也尝试将class="pull-right img-responsive" 添加到 img 对象中，但它似乎没有做任何事情。

编辑：已解决。我只是在导入之前为图像添加了一些边距。

Answer 1

这样的事情应该可以工作：

  .col{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:120px;
  }

Answer 2

.logo 位置 { 对象拟合：包含；

object-position: center;

}