₦airaland Forum

OGWILLS123:
Good day my senior programmer's in the house

Please how do i adjust that fvken nairaland box to
fit at the center with the login input fields

Thanks

HotPoundedYam:
. Thou Shalt not clone

aronski:
<center><p>NAIRALAND</p></center>

aronski:
<center><p>NAIRALAND</p></center>

1. Create a parent container to hold a) niaraland div b)form div

2. Set the parent container to display: flex AND direction to be flex column AND justify content by center AND align items by center

3. Optional steps: The form div that contains username and password input, can be set to also display flex, or you could just stack each one on top of the other and seperate them using margin-top.

I suggest you go the flex route, because it will make your page responsive at all breakpoints i.e. they will shrink and grow along with the view port

Using a utility-first framework like tailwindcss, you would to this

<div className="flex flex-col justify-center items-center w-5/10 mx-auto"
<div className="flex flex-col justify-center items-center">
<input name="username" type="text" id="username" placeholder="username" className="h-10 rounded-lg"/>
<input name="password" type="password" id="password" placeholder="password" className="h-10 rounded-lg mt-6"/>

//......more divs as u deem fit here
</div>
</div>

OGWILLS123:
Good day my senior programmer's in the house

Please how do i adjust that fvken nairaland box to
fit at the center with the login input fields

Thanks

etoluw:
this method is outdated
use this instead p { margin:0 auto; }

aronski:
ha! 9ja devs .. Did I hear u say "outdated", HTML 5 tag outdated again... Ha!

Karleb:
Center is not an html5 tag.

cixak95211:
Thanks for correcting him . . center was deprecated as afar back as HMTL4 in favor of text-align property . .
Was very disappointed he even said "9ja devs" and even far disappointed, somebody would mention
center and using standalone-tags in 2020 when we have flexbox and grids

Karleb:
Center is not an html5 tag.

aronski:
?

Karleb:
I saw your comment before you edited it.
Next time do a Google search before embarrassing yourself.

Anonime1105:
body{ display: flex; Justify-content: center; }

OGWILLS123:
not working