gpt4 book ai didi

html - 无法通过 CSS 居中调整大小的大图像

转载 作者:行者123 更新时间:2023-12-04 07:14:43 24 4
gpt4 key购买 nike

我正在尝试通过 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>

这是我最后的样子:
Figure 1
我已经尝试使用 align-items 中心和 justify 内容中心以及图像,但无济于事。
我是否只需要上传一个较小的图像并从那里开始工作?

最佳答案

尝试这个:

#cover: {
margin-left: 50%;
transform: translateX(-50%);
}

关于html - 无法通过 CSS 居中调整大小的大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68836396/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com