Question

我想将图像放在与盒子中央相关的徽标中。

https://pnghunter.com/logo/acura-nsx-gray/

该如何影响？

Answer 1

将css属性display: block; margin: 0 auto添加到图像。

您也可以使用flexbox。添加以下CSS属性-

display: flex; align-items: center; justify-content: center;

Answer 2

您需要将图像显示为block，并在两边（左右）添加auto。

.container {
   background-color: gray;
   padding: 30px 0;
}

img {
   width: 50%;
   
   /* This will do the trick */
   display: block;
   margin: 0 auto;
}

<div class="container">
    <img src="https://purepng.com/public/uploads/large/purepng.com-acura-nsx-graycarvehicletransportautocars-561521125226tokdl.png" alt="Car">
</div>

替代：使用flexbox。由于many bugs仍存在于IE中，因此不会像自动保证金那么强大。但是，如果设置了父母的身高，则该高度也会垂直居中。

.container {
  background-color: gray;
  padding: 30px 0;

  /* Here comes the magic */
  display: flex;
  justify-content:center;
  align-items: center;
  
}

img {
  width: 50%
}

<div class="container">
    <img src="https://purepng.com/public/uploads/large/purepng.com-acura-nsx-graycarvehicletransportautocars-561521125226tokdl.png" alt="Car">
</div>

Answer 3

输入此CSS规则...

    display: flex;
    justify-content: center; //horizontal
    align-items: center; //vertical

Answer 4

您应该为此使用flexbox。将以下CSS添加到容器（logo__container）中：

data.corr()

将图片放在div的中心

4 个答案: