centering a flexbox that contains images

sashasparrow
Newbie ⚓︎

⛺︎ My Room

centering a flexbox that contains images

« on: March 06, 2025 @287.20 »

so i'm trying to center a flexbox full of images on my nav page, kinda like buttons, but i just cannot get the dang flexbox to center. i've tried making the flexbox a grid instead, i've tried moving around the css, i've tried different padding and... honestly i don't remember everything i've tried lol, but i've been at this for a few days.

this is what i want it to look like:

and this is my code (i'm keeping the CSS internal instead of on a style sheet):

Code

<!DOCTYPE html>
<head>
<style>
body {
  background-image: url(https://sashasparrow.neocities.org/heartbg.png);
  background-attachment: fixed;
  height: 100vh
  weight: 100vh
}

.layout {
  width: 100%;

  display: grid;
  grid-template-rows: repeat(auto-fit, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}


.center {
 align-content: center;
 justify-content: center;
}

</style>
</head>

<body>
<section class="layout">
<div class="center">
    <div><a href="https://sashasparrow.neocities.org/index.html"><img src="https://sashasparrow.neocities.org/icon1.png" style="width:75%"></a></div>
    <div><a href="https://sashasparrow.neocities.org/index.html"><img src="https://sashasparrow.neocities.org/icon1.png" style="width:75%"></a></div>
    <div><a href="https://sashasparrow.neocities.org/index.html"><img src="https://sashasparrow.neocities.org/icon1.png" style="width:75%"></a></div>
  </div>
</section>
</body>
</html>

this is the page:
https://sashasparrow.neocities.org/navpage

any tips are super appreciated c:


	Logged

turn on, tune in, drop out

stoat
Newbie

⛺︎ My Room

Re: centering a flexbox that contains images

« Reply #1 on: March 06, 2025 @421.64 »

hi!!!

I'd do this like this:

Code

<!DOCTYPE html>

<head>
    <style>
        body {
            background-image: url('https://sashasparrow.neocities.org/heartbg.png');
            background-attachment: fixed;
            height: 100vh;
            width: 100vw;
        }

        .layout {
            display: grid;
            grid-template-rows: repeat(auto-fit, 1fr);
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
            text-align: center;
        }


        .wrap {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        img {
            max-width: 200px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <section class="layout">

            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>

    </section>
    </div>
</body>

</html>

^this code works in my browser so you might want to tweak for neociies! idk how finicky it is!

so by putting the grid layout inside a wrapper div and centering that with flex instead. i have also cleaned up some other bits that may have been muddying the waters, you had a typo with "weight" on the body tag and i've taken the styles off the img tags preferring to style with css instead (but you can change that)

i think you could probably achieve this layout with some flex-wrap and flex-basis hackery but this is the way i do it!

let me know if you have any questions or want any tweaks!


	Logged

i love you!

P_quod
Newbie ⚓︎

I can't be sure of anything

⛺︎ My Room

Re: centering a flexbox that contains images

« Reply #2 on: March 06, 2025 @507.31 »

Hello!

I looked a little bit at your code, and I think the problem is that your .layout is already a grid, compressing your children elements (the div .center and all its inner divs) in a column on the left.

If your page will only contain your grid of button-like divs, you can just only keep the width property of your .layout and then work on your .center like this :

Code

.layout{
  width: 100%;
}

.center{
  display: grid;
  margin: auto;
  grid-template-columns: repeat(3, 1fr);
  width: 70%;
}

You can then play along with the width to choose how much space your buttons will fill. I recommend using a grid because that's what I found most easy to understand when I started CSS, but maybe it's just a personal taste! Anyway, it should work with a flexbox too, as long as your parent section is just a plain div with a 100% width.

I hope my message is clear enough, feel free to ask any questions if not, I hope I'll be able to help you!

[edit]: I should add for more precision that defining a width to any div and setting the margins on auto will center it automatically :)


« Last Edit: March 06, 2025 @513.21 by P_quod »	Logged

sashasparrow
Newbie ⚓︎

⛺︎ My Room

Re: centering a flexbox that contains images

« Reply #3 on: March 07, 2025 @696.90 »

Quote from: P_quod on March 06, 2025 @507.31

Hello!

I looked a little bit at your code, and I think the problem is that your .layout is already a grid, compressing your children elements (the div .center and all its inner divs) in a column on the left.

If your page will only contain your grid of button-like divs, you can just only keep the width property of your .layout and then work on your .center like this :
Code
.layout{
  width: 100%;
}

.center{
  display: grid;
  margin: auto;
  grid-template-columns: repeat(3, 1fr);
  width: 70%;
}
You can then play along with the width to choose how much space your buttons will fill. I recommend using a grid because that's what I found most easy to understand when I started CSS, but maybe it's just a personal taste! Anyway, it should work with a flexbox too, as long as your parent section is just a plain div with a 100% width.

I hope my message is clear enough, feel free to ask any questions if not, I hope I'll be able to help you!

[edit]: I should add for more precision that defining a width to any div and setting the margins on auto will center it automatically :)

this is SO helpful, thank you for explaining why i was having a problem! that makes a ton of sense, and now i'll understand better the next time i'm building new elements for my site!

Quote from: stoat on March 06, 2025 @421.64

hi!!!

I'd do this like this:

Code

<!DOCTYPE html>

<head>
    <style>
        body {
            background-image: url('https://sashasparrow.neocities.org/heartbg.png');
            background-attachment: fixed;
            height: 100vh;
            width: 100vw;
        }

        .layout {
            display: grid;
            grid-template-rows: repeat(auto-fit, 1fr);
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
            text-align: center;
        }


        .wrap {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        img {
            max-width: 200px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <section class="layout">

            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>
            <div><a href="https://sashasparrow.neocities.org/index.html"><img
                        src="https://sashasparrow.neocities.org/icon1.png"></a></div>

    </section>
    </div>
</body>

</html>

i used this and it worked PERFECTLY! thank you!

the updated (with correct, if not working) links page is live if y'all wanna see what you helped with! you can find it here.

xoxo


	Logged

turn on, tune in, drop out

Pages: [1]

« previous next »

Vaguely similar topics! (3)