Use flexbox to center the text, then center the button with the remaining 50%
Can't believe I'm just getting started using flexbox seems cool, but I'm stuck. I could just change my mind, but I understand that flexbox should make things easier.
I want to display a full image of a page hero with a title, tagline and contact button, pretty simple?
I added an image of what I want:
Basically, I want to center the title and slogan text in the center for this, I use:
justify-content:center;
Then I want the button to be in the center of the remaining 50%. I added a green image to the side to show which positions I want.
I tried using:
justify-space-around;
but that seems to push the title text up.
Here is my current code:
* {
margin:0;
padding:0;
}
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.website-container {
display: grid;
grid-gap: 0rem;
grid-template-columns: repeat(1fr ) ;
}
.website-container > * {
display: flex;
height: 100vh;
}
h1 {
font-weight: 600;
font-size: 4vw;
}
.header {
display:flex;
justify-content: center;
align-items: center;
text-align:center;
flex-direction: column;
}
button {
--padding: 1.1em;
color: black;
font: inherit;
background: none;
padding: 1rem calc(1rem * 2);
border: 2px solid black;
border-radius: 2px;
}
button:hover {
color: black;
background: red;
}
<div class="website-container">
<header class="header">
<div class="container-fluid">
<div class="space"></div>
<div class="title">
<h1>Heading text here</h1>
<h2>Slogan text here</h2>
</div>
<div class="calltoaction">
<button type="submit" style="--primary-button">button</button>
</div>
</div>
</header>
</div>
If I missed something, please let me know and I'll add another post.
source to share
The simplest one with existing markup would be to just add this rule
.calltoaction {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
}
and add position: relative
to the rule .website-container>*
, so the absolute position refers to it calltoaction
.
Please note that you need to view the snippet on the full page
Fragment of the stack
* {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.website-container {
display: grid;
grid-gap: 0rem;
grid-template-columns: repeat(1fr);
}
.website-container>* {
position: relative;
display: flex;
height: 100vh;
}
h1 {
font-weight: 600;
font-size: 4vw;
}
.header {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
button {
--padding: 1.1em;
color: black;
font: inherit;
background: none;
padding: 1rem calc(1rem * 2);
border: 2px solid black;
border-radius: 2px;
}
.calltoaction {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
}
button:hover {
color: black;
background: red;
}
<div class="website-container">
<header class="header">
<div class="container-fluid">
<div class="space"></div>
<div class="title">
<h1>Heading text here</h1>
<h2>Slogan text here</h2>
</div>
<div class="calltoaction">
<button type="submit" style="--primary-button">button</button>
</div>
</div>
</header>
</div>
I would recommend to simplify the code a bit, use Flexbox properties and get the same result
The main trick here - instead of an additional markup element - is to use pseudo as a ghost element for balancing calltoaction
, give them both flex-basis: 100%
as flex-shrink
default 1
, they will shrink the same and keep title
in the middle.
Then make the container a .website-container .calltoaction
flex container and center button
withalign-items: center;
* {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.website-container {
display: flex;
align-items: center;
flex-direction: column;
height: 100vh;
text-align: center;
}
.website-container::before,
.website-container .calltoaction {
content: ' ';
flex-basis: 100%;
}
.website-container .calltoaction {
display: flex;
align-items: center;
}
h1 {
font-weight: 600;
font-size: 4vw;
}
button {
--padding: 1.1em;
color: black;
font: inherit;
background: none;
padding: 1rem calc(1rem * 2);
border: 2px solid black;
border-radius: 2px;
}
button:hover {
color: black;
background: red;
}
<div class="website-container">
<div class="title">
<h1>Heading text here</h1>
<h2>Slogan text here</h2>
</div>
<div class="calltoaction">
<button type="submit" style="--primary-button">button</button>
</div>
</div>
source to share