Question

如何在div中心插入图像？这是我的html文件：

.navbar1 img{
  width: 50px;
  height: 50px;
}

 <div class="navbar1">
    <a href="#end"><img src="down-button.png" alt="به پایین بروید"></a>
</div>

我想将此图像添加到我的div的中心。

我将此行添加到我的css文件中，但不起作用：

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

Answer 1

你在这里

.navbar1 {
  text-align: center
}

.navbar1 img{
  width: 50px;
  height: 50px; 
}

<div class="navbar1">

        <a href="#end"><img src="https://images.unsplash.com/photo-1550942505-8be581ce735d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="به پایین بروید"></a>

</div>

Answer 2

有很多方法可以实现这一目标。如果您使用的是边距，我认为最好用这种方法代替边距：auto：

.navbar1 img{
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

也可以使用flexbox之类的“工具”来实现。

Answer 3

您可以通过CSS flex属性轻松地实现这一点，align-items：center将垂直对齐元素，并justify-content：center将根据其父对象的高度和宽度水平对齐

.navbar1{
 display:flex;
 width:100%;
 height:100%;
 align-items:center;
 justify-content:center;
}

Answer 4

尝试一下，我正在使用flex属性。确保使用-webkit而不是flex属性来实现浏览器兼容性。

html

       <div class="navbar1">
        <a href="#end"><img src="down-button.png" alt="به پایین بروید"></a>
       </div>

样式

.navbar1{
       display: flex; 
       justify-content: center;
       align-items: center;
}

-webkit（flex）：-可选

       display: -webkit-box;     
       display: -moz-box;         
       display: -ms-flexbox;     
       display: -webkit-flex;    
       display: flex; 
       -webkit-justify-content: center;
       -ms-flex-pack: center;
       justify-content: center;
       -webkit-box-align: center;
       -moz-box-align: center;
       -webkit-align-items: center;
       -ms-flex-align: center;
       align-items: center;

谢谢。

Answer 5

最好的方法是使用flexbox。尝试以下代码：

session.rollback

在没有js的div中心插入图片

5 个答案: