固定div中图片和标签的对齐问题CSS

我们可以使用如下的HTML和CSS代码解决固定div中图片和标签的对齐问题：

HTML代码：

<div class="container">
  <img class="img" src="image.jpg" alt="example image">
  <span class="label">标签</span>
</div>

CSS代码：

.container {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  margin-right: 10px;
}

.label {
  font-size: 24px;
  color: #333;
}

解释一下CSS代码：

• position: fixed 使div固定在浏览器窗口中
• left和top属性用来将div居中在页面中心
• display: flex将div设为弹性盒子
• align-items: center使div的内容垂直居中
• justify-content: center将div的内容水平居中
• flex-shrink: 0防止图片在缩小时变形
• margin-right属性用于在图片和标签之间创建间距

这样做，图片和标签就会在固定div中水平和垂直居中对齐。