【发布时间】：2021-10-20 11:40:27
【问题描述】：
我正在尝试通过 CSS 将调整大小的图像居中，但它似乎无法正常工作，因为它总是左对齐。
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(
0deg,
rgba(247, 247, 247, 1) 23.8%,
rgba(252, 221, 221, 1) 92%
);
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Inter", sans-serif;
margin: 0;
/* z-index: 1000; */
}
img {
max-width: 30%;
height: auto;
}
.music-container {
background: white;
border-radius: 15px;
box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Music Player</h1>
<div class="music-container" id="music-container">
<div class="music-info">
<h4 id="title"></h4>
<div class="progress-container" id="progress-container">
<div class="progress" id="progress"></div>
</div>
</div>
<audio src="music/Kanye West - Father Stretch My Hands, pt. 3 (????????) ft. Kendrick Lamar, Kid Cudi, Desiigner.mp3" id="audio"></audio>
<div class="img-container">
<img src="images/Jil.png" alt="music-cover" id="cover">
</div>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fas fa-backward"></i>
</button>
<button id="play" class="action-btn action-btn-big">
<i class="fas fa-play"></i>
</button>
<button id="next" class="action-btn">
<i class="fas fa-forward"></i>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>这就是我的样子：
我尝试使用 align-items 中心和 justify 内容中心以及图像，但无济于事。
我是否只需要上传一个较小的图像并从那里开始工作？
【问题讨论】：