CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-5
orange2piece
orange2piece

Reputation: 39

icons on footer don't align

Trying to align my footer icons but I can't seem to center the first 2 images. The bootstrap icons center fine, but the first 2 images don't. I have tried doing things like align-items-center, justify-content-center, text-center, etc.

using 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/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        
    </body>
</html>

Upvotes: 1

Views: 75

Answers (1)

loursk
loursk

Reputation: 161

The vertical-align property on your images is different than the bootstrap icons:

If you inspect the bootstrap icon, you'll see there is:

vertical-align: -.125em;

Try to add the same vertical-align to your images.

Upvotes: 2

Related Questions