我想要這個網站：https ://www.petzl.com/INT/en
我想在一行或一行中顯示具有 3 個 div“服務”“培訓”和“商店”的中心文本。
我嘗試了行內塊、填充、邊距、浮動等，但也許我做錯了什么。
如果我不使用這一行“place-content:center;” 它把它放在左邊有很多空間。
我的網站鏈接：beta.edgerope.com
請在下面找到代碼：
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>：
uj5u.com熱心網友回復：
您可以使用類似這樣的 CSS flex 屬性
.image {
display: flex;
justify-content: space-evenly;
align-items: center;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504995.html
標籤：javascript html jQuery css WordPress
上一篇：卡沒有正確滾動堆疊