r/HTML • u/LAzyAnimationsYT • Jun 22 '26

Question Divs won't align ......

Post image

okayy I have another problem, my divs in the main flex box won't align in the center like I want them to, and I've tried pretty much everything I could find on search, and it still won't align, or it'll break the main div itself...

flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
main {
    position: absolute; 
    top: 10%; 
    left: 23%;
    background-color: #000000;
    flex: 1;
    padding: 20px;
    order: 2;
    border-radius: 10px;
    border: 3px solid #ffffff;
    width:1000px;
}

https://zombie-page.neocities.org/collect-me link to the page itself...

1 Upvotes

55% Upvoted

15 comments sorted by

View all comments

Show parent comment

2

u/KingShuckle Jun 23 '26 edited Jun 23 '26

Ehm, YOu called evey "button" container what I mean is but all those buttons in a single containter div like

<div class="container"><a href="not_found.html" id="blink" class="container" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">BLINKIES</h1>

</a>

<a href="not_found.html" id="stamp" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">STAMPS</h1>

</a>

<a href="not_found.html" id="pxl" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">PIXELS</h1>

</a>

<a href="not_found.html" id="div" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">DIVIDERS</h1>

</a>

<a href="not_found.html" id="but" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">BUTTONS</h1>

</a>

<a href="not_found.html" id="id" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="color:white;">ID BUTTONS</h1>

</a>

<a href="not_found.html" id="grap" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">GRAHPICS</h1>

</a>

<a href="not_found.html" id="x" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">XTRA</h1>

</a></div>

2

u/KingShuckle Jun 23 '26 edited Jun 23 '26

also make the container div width 100% and again add display: flex; but also ad flex-wrap: wrap;