I'm currently grappling with a template, endeavoring to arrange the elements according to these stipulations:
- The header needs to adhere to the top, centered horizontally, with adequate spacing between the H3 and the grouping of
<nav>links. - The
<main>should be aligned both horizontally and vertically, with text alignment set to the right.
I've been tackling this for 3 hours without success. Below is the template I'm working with:
<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 still a work in progress here. Any tips on centering content vertically using Bootstrap? I'm stumped.</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 experimented with different combinations of mx-auto, my-auto, align-items-center, d-flex, but haven't found the right solution yet. It may seem like a simple question, but I can't seem to locate a satisfactory answer tailored to my specific scenario (or one that actually works).