HTML社交按钮问题

z9ju0rcb 于 2022-12-09 发布在其他

关注(0)|答案(4)|浏览(146)

正在添加社交按钮

到我的网站。但他们不是在彼此的顶部居中。
尝试执行<center>，但没有任何操作。
这里是我的html代码，我正在使用

<div id="footer">
    <a class="btn_social" href="https://discord.gg/DvXbGPdZ85"><i class="fas fa-home"></i></a>
    <a class="btn_social" href="mailto:help@alphatron.games"><i class="fas fa-at"></i></a>
    <a class="btn_social" href="https://twitter.com/AlphatronGames"><i class="fa fa-laptop-code"></i></a>
    <a class="btn_social" href="https://www.instagram.com/alphatrongames/"><i class="fa fa-headset"></i></a>
    <br><br>
    <a class="btn_social" href="https://discord.gg/DvXbGPdZ85"><i class="fab fa-discord"></i></a>
    <a class="btn_social" href="mailto:help@alphatron.games"><i class="fas fa-at"></i></a>
    <a class="btn_social" href="https://twitter.com/AlphatronGames"><i class="fab fa-twitter"></i></a>
    <a class="btn_social" href="https://www.instagram.com/alphatrongames/"><i class="fab fa-instagram"></i></a>
  </div>

这是我使用的CSS代码。

.btn_social {
    font-size:18px;
    color:#fff;
    margin:40px 20px;
    padding:15px 18px;
    border-radius:50%;
    background:#000;
    transition:0.4s ease-in-out;
}
.btn_social:hover {
    color:#000;
    background:#fff;
    cursor:pointer;
}

@media (max-width: 900px){
    .btn_social {
        font-size:14px;
        margin:10px;
        padding:10px 11px;
    }
}

不知道该怎么做，或者是否是图标的问题，但任何帮助都是感激的。

Html

来源：https://stackoverflow.com/questions/74725623/html-social-button-issue

4条答案

按热度按时间

rsaldnfx1#

您可以使用网格并通过使用align-items和justify-content将元素居中，就像在代码片段中一样。
我不确定我的答案，你的html不包括图片，所以我用一些文字代替它们...
第一个

赞(0）回复(0）举报 2022-12-09

46qrfjad2#

您可以通过使用display flex属性并通过对齐项和对齐内容来居中元素来实现此目的。
如有必要，您可以根据需要调整页脚的宽度和高度
第一个

赞(0）回复(0）举报 2022-12-09

k2fxgqgv3#

如果我没理解错的话，你要把它们从上到下排成一排，并在网页上居中。
使父级具有以下CSS属性：

{
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0 auto;
}

边距设置为“0 auto”，使其位于其父级的中心。

赞(0）回复(0）举报 2022-12-09

camsedfj4#

导航还是按钮？
使用class=id”"，和css参数每个元素

赞(0）回复(0）举报 2022-12-09

我来回答

HTML社交按钮问题

4条答案

相关问题

热门标签

最新问答