如何将播放按钮放置在所有图像的中间

index.html-下面是index.html文件代码，我在其中编写了所有html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li><a href="#">View All</a></li>
<li>
<h1>Net Steam</h1>
</li>
<li><a href="#">Subscribe</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="./img-1.jpg" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-2.jpg" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-3.jpg" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
</div>
</div>
</body>
</html>

style.css-下面是这里的style.css文件代码我已经写了我所有的css代码

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 1rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}
.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}

我想用CSS把播放图标放在所有三个图像的中心，但我只得到了中心图像的播放图标。如何使播放图标位于所有三个图像的中心。我想把播放字体真棒图标在图像的中心

试试这个。

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 4rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}

.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
position:absolute;
text-align:center;
color:red;
bottom:30px;

}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
justify-content:center;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
display:flex;
justify-content:center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play" style="position:relative"></i></div>
<div class="stream">
<ul>
<li><a href="#">View All</a></li>
<li>
<h1>Net Steam</h1>
</li>
<li><a href="#">Subscribe</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-1"></div>

<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-2"></div>

<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-3"></div>

<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
</div>
</div>
</body>
</html>

您可以为.centered和.img-container类使用flexbox属性。如下所示：

img {
width: 200px;
height: 200px;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
z-index: 1111;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}

完整的工作片段：-(我已经使用随机gif作为图像来回答这个问题，你可以将它们替换为你的图像路径(

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color: #000;
color: #fff;
padding: 1rem 4rem;
}
nav {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #fff;
margin: 0;
padding: 0;
}
.stream {
max-width: 1000px;
width: 100%;
}
.fa-play {
font-size: 3rem;
}
ul {
list-style-type: none;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0;
padding: 0;
}
li h1 {
font-size: 3rem;
}
a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
background-color: white;
}
.row {
display: flex;
}
.col {
position: relative;
padding: 1rem;
flex: 1;
}
.col img {
max-width: 100%;
}
img {
width: 200px;
height: 200px;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
z-index: 1111;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.text {
display: flex;
flex-direction: column;
align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li><a href="#">View All</a></li>
<li>
<h1>Net Steam</h1>
</li>
<li><a href="#">Subscribe</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
</div>
</div>

希望这就是你想要的外观

相关内容

最新更新

热门标签：