#Centering a div... (seriously)

34 messages · Page 1 of 1 (latest)

carmine notch
#

Having some issues trying to center a div.......................................... it's not Astro related but would love some help on this problem. I have a nav button container I want to center that accounts for an external link that is to the right of the container. I have flex-end on the external link which works perfectly and a 1fr auto grid for the container. For some reason I cannot for the life of my figure out why the navigation button is not centering. I've created a test page. https://87fa7a34.portfoliov2-3fc.pages.dev/

Thanks so much in advance.

test

poo

shy wraith
#

like this

#

in this way u have to add empty div

#

if u want do it or u cant. its ez to use grid-areas
w8 a sec

carmine notch
shy wraith
#

grid-area better choice for responsive tune

carmine notch
#

oops

shy wraith
#

never use just 1fr
if BIG content came it will brake ur layout

#

use minmax(0, 1fr)

#

its prevent column overflow

carmine notch
#

oh i see

#

the issue now is that it doesnt align along the same x axis

shy wraith
#

u forgot columns template

carmine notch
#

and align-items: center; doesnt work here

#

in my latest code i've removed the grid template

shy wraith
#

why?

carmine notch
#

the content doesnt require a change in layouts

#

unless im not understanding correctly

shy wraith
#

it doesnt matter

#

add grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);

#

and empty div as first element

#

if u dont want use grid-area

carmine notch
#

ah okay

#

is adding an empty div bad practice?

shy wraith
#

nope. its just empty div

#

i have another trick

#

w8

#

same result but with little smell.. coz zero width column

#

i prefer solution with grid-areas. more readable. more friendly

carmine notch