The property align-items center doesn't work with tag nav

Question

Good morning everyone.I want to try to tell you about my flexbox problem. I searched a lot on the internet (some days), maybe i maybe i was looking badly on the google ? but unfortunately I did not find the answer to my question. My problem is that when I want to apply persistence align-items: center; for flexbox, it doesn't work. I just want it to auto-center, both horizontally and vertically.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <title>flex-box</title>
    <link rel="stylesheet" href="css/flex.css">
</head>
<body>
    <div class="header">
        <div class="align-header">
            <nav class="navigation">
                <ul class="my-ul-links">
                    <li class="link"><a href="#">Home</a></li>
                    <li class="link"><a href="#">Forum</a></li>
                    <li class="link"><a href="#">Catalog</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="wallpaper"></div>
</body>
</html>

I even went to the official documentation MDN but unfortunately, I didn’t find there how to use flexbox together with the tag nav and ul, nested in li + a. Very weird. Maybe I don't understand something.

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #eee;
}

.header {
    background: white;
    width: 100%;
    height: 50px;
}

.align-header {
    width: 800px;
    height: 100%;
    margin: 0px auto 0px auto;
}

.my-ul-links {
    display: flex;
    justify-content: center;
    align-items: center; /* does not working */
}

.link {
    padding: 0px 10px 0px 10px;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

I will be very grateful if you can help me with this problem. Thank for early.

score 2 · Accepted Answer · edited Oct 24 '20 at 07:07

2

Serj1c is right about the flex-direction.

If you want your align-items: center to work, please make sure that the li height and width are not 100%.

edited Oct 24 '20 at 07:07

Dharman

30,962
25
85
135

answered Oct 24 '20 at 07:01

Ngọc Nguyễn

339
4
16

1

Thank you very much and it really worked. I thought about this problem a lot and could not solve it. It turns out that it's all that simple ? It turns out yes. And my whole problem was that I just didn't insert a fixed height and width in pixels. i can't believe it. I've already started building the big bang theory. Thanks again. – Schedule Oct 24 '20 at 07:41

score 1 · Answer 2 · answered Oct 24 '20 at 07:10

1

you can always use the new stuff, like

place-items: center || place-content: center.

. works like a charm

answered Oct 24 '20 at 07:10

score 0 · Answer 3 · answered Oct 24 '20 at 05:56

0

What are you trying to achieve? "align-items" does not center items horizontally and vertically. it simply aligns them acc.to cross-axis of your "flex-direction". for instance, if your "flex-direction: column" than "align-items: center" will align them horizontally. to center items along the main-axis of your flex-direction use "justify-content"

answered Oct 24 '20 at 05:56

Serj1c

140
2
7

i am not sure and I can be wrong but if I remember correctly. I did the same but only with simples div without nav, ul, li, and it worked. (I seem to remember so) – Schedule Oct 24 '20 at 06:22

The property align-items center doesn't work with tag nav

3 Answers3