gpt4 book ai didi

html - 如何使 Bootstrap 社交图标居中?

转载 作者:行者123 更新时间:2023-11-28 15:52:39 26 4
gpt4 key购买 nike

如何将这些社交媒体图标放置在页脚的中央?我试过 text-align 和 margin-left 和 margin-right auto。当我打开文件时,四个图标位于页面的左下角。

这是我的完整 HTML 文件,底部有 Bootstrap 内容。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social-btns">
<a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
<a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
<a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
<a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
</div>

Screen shot

最佳答案

您只能通过 css 属性 text-align: center 设置 social-btns 类。

请查看以下代码片段以获取更多详细信息。编码愉快!

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
.social-btns{
text-align: center;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="social-btns">
<a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
<a type="button" class="btn-floating btn-lg btn-email"><i class="fa fa-envelope"></i></a>
<a type="button" class="btn-floating btn-lg btn-git"><i class="fa fa-github"></i></a>
<a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
</div>
</body>
</html>

关于html - 如何使 Bootstrap 社交图标居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49503946/

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