Question

我已经使用Flex在页面中居中放置了div，现在我想在div中居中放置图像。

我觉得我在原来的居中位置上已经习惯了许多属性，并且不知道我是否正确地执行了操作。

#auth_top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;    
}
#auth{
  width:  250px;
  height:  185px;
  background: rgba(255,255,200,0.5);
  box-shadow:   0px 1px 3px rgba(25, 25, 25, 0.4);
}

#auth_google_link{
  width: 64px;
  height: 64px;
  display: block;
}
#auth_google_img{
  width: 64px;
  border: 1px solid white;
  border-radius: 2px;
}
#auth_google_img:hover{
  border: 1px solid black;
}

Answer 1

您可以将console.log(first + " " + second);放在#auth内并居中。

flexbox

#auth_top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;    
}
#auth{
  width:  250px;
  height:  185px;
  background: rgba(255,255,200,0.5);
  box-shadow:   0px 1px 3px rgba(25, 25, 25, 0.4);
  display: flex;     /* added style from here */
  justify-content: center;
  align-items: center;
}
  
  
#auth_google_link{
  width: 64px;
  height: 64px;
  display: block;
}
#auth_google_img{
  width: 64px;
  border: 1px solid white;
  border-radius: 2px;
}
#auth_google_img:hover{
  border: 1px solid black;
}

希望有帮助。干杯！

Answer 2

您可以使用绝对定位，但是我想这不是您想要的。你能做的就是

#auth{
    text-align: center;
    white-space: nowrap;
}
#auth:after {
    content: '';
    min-height: 100%;
    display: inline-block;
    vertical-align: middle;
}
#auth_google_link{
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
}

Answer 3

您应该从auth_google_link中删除display：block（以使其居中），然后在auth_google_img上添加22％的填充顶部（将其向下移动到中间），并且应该可以正常工作< / p>

如何使用Flex居中图像？

3 个答案: