I'm currently working with a template, and I'm trying to position the elements with the following requirements:
- The header must stick to the top, be horizontally centered, with spacing between the H3 and the set of
<nav>links. - The
<main>must be horizontally and vertically centered, with text-alignment being to the right.
I've been at this for 3 hours and I still haven't managed to get it to work. Here is the template:
<div><header className='fixed-top d-flex justify-content-around'><div className=""><h3 className="float-md-start mb-0">Ethan Leyden</h3><nav className="nav nav-masthead justify-content-center float-md-end"><a className="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a><a className="nav-link fw-bold py-1 px-0" href="#">Features</a><a className="nav-link fw-bold py-1 px-0" href="#">Contact</a></nav></div></header><div className="mx-auto my-auto"><main className=""><h1>Welcome to the site</h1><p className="lead">It's definitely still under construction. Do you know how to vertically center content with Bootstrap? I sure don't</p><p className="lead"><a href="#" className="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a></p></main></div></div>I've tried various combinations of mx-auto, my-auto, align-items-center, d-flex but to no avail. I'm sure this is a trivial question but I can't find the answer anywhere to my specific question (or find one that works, at least).