我正在嘗試使用社交媒體圖示制作頁腳。但是，我不知道如何讓圖示并排放置。它們只是在側面并垂直對齊（idek 如何在中心對齊）。我希望它們圖示在中心和并排的圖示中。
HTML：
<div class="footer1">
<div class="fb"><a href="#"></div>
<div class="ig"></div>
<div class="yt"></div>
<div class="twt"></div>
<div class="pin"></div>
</div>
CSS：
.fb {
background: url('../images/sites.png') no-repeat -79px -109px;
width: 302px;
height: 302px;
}
.ig {
background: url('../images/sites.png') no-repeat -459px -110px;
width: 307px;
height: 307px;
}
.yt {
background: url('../images/sites.png') no-repeat -852px -115px;
width: 299px;
height: 299px;
}
.twt {
background: url('../images/sites.png') no-repeat -1244px -114px;
width: 295px;
height: 293px;
}
.pin {
background: url('../images/sites.png') no-repeat -1632px -112px;
width: 293px;
height: 293px;
}
uj5u.com熱心網友回復：
你可以做這樣的事情。Flexbox真的很方便。
<html>
<style>
.footer {
display: flex;
gap: 20px; /* Here you can specify a gap between the child elements*/
}
.footer img {
width: 30px;
}
</style>
<body>
<div class="footer">
<img src="../images/someicon1.png"></img>
<img src="../images/someicon2.png"></img>
<img src="../images/someicon3.png"></img>
<img src="../images/someicon4.png"></img>
<img src="../images/someicon5.png"></img>
<div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411137.html
標籤：
上一篇：搜索文本行軍整個文本