尝试对齐页脚图标，但似乎无法将前两个图像居中。引导图标居中很好，但前两个图像不能。我尝试过将项目居中、内容居中、文本居中等操作。
使用 Bootstrap v5.3.0-alpha-1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="container" style="color: black;">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-muted">© 2022 Company, Inc</span>
</div>
<ul class="nav justify-content-center">
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Team</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
</ul>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" class="opensea_icon" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://twitter.com/xxx">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://t.me/xxx">
<i class="bi bi-telegram"></i>
</a>
</li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
1条答案
按热度按时间mhd8tkvw1#
图像上的垂直对齐属性与引导图标不同：
如果您检查引导图标，您将看到：
尝试添加相同的垂直对齐到您的图像。