This question already has answers here:
How to target a specific column or row in CSS Grid Layout?
(6 answers)
Closed 4 months ago.
I have created an adaptive card layout (check the Codepen link, the code below won't work here because I use SCSS)
The list of cards will be dynamic, they can be added and removed. How can I make it so that if there is only one card left, it will be centered horizontally instead of sticking to the left side of the screen?
//Root fonts and colors
$root-font-size: 16px;
html {
font-size: $root-font-size;
}
body {
background-color: #e5e5e5;
}
//breakpoints
$breakpoint-small: 576px;
$breakpoint-large: 992px;
$breakpoint-extralarge: 1200px;
.page-wrapper {
margin: 50px 250px;
}
#media only screen and (max-width: $breakpoint-extralarge) {
.page-wrapper {
margin: 50px 150px;
}
}
#media only screen and (max-width: $breakpoint-small) {
.page-wrapper {
margin: 50px 50px;
}
}
//Card
$card-title-fontsize: 2rem;
$card-subtitle-fontsize: 0.875rem;
$card-transition-speed: 0.3s;
$card-border-radius: 4px;
.cards-section {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 20px;
}
.card-main {
position: relative;
display: flex;
flex-direction: column;
flex-basis: calc(100% / 2 - 20px);
height: 200px;
border-radius: $card-border-radius;
background-color: white;
border: solid #e0e0e0 1px;
box-sizing: border-box;
overflow: hidden;
}
.card-main:hover {
transition: all $card-transition-speed;
box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
cursor: pointer;
.card-title {
opacity: 0;
transition: all $card-transition-speed;
}
.card-icon-1 {
width: 150px;
height: 150px;
opacity: 0;
transition: all $card-transition-speed;
}
.card-icon-2 {
width: 150px;
height: 150px;
opacity: 0.3;
transition: all $card-transition-speed;
}
.card-subtitle {
height: 50%;
opacity: 1;
transition: all $card-transition-speed;
}
}
.card-icon-1 {
width: 100px;
height: 100px;
background-color: darkgrey;
border-radius: 100%;
margin: 0 auto;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
opacity: 1;
transition: all $card-transition-speed;
}
.card-icon-2 {
width: 100px;
height: 100px;
background-color: #00ffb9;
border-radius: 100%;
margin: 0 auto;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
opacity: 0;
transition: all $card-transition-speed;
}
.card-title {
font-size: $card-title-fontsize;
line-height: 2rem;
font-weight: 500;
letter-spacing: 0.0125em;
margin: 130px auto;
opacity: 1;
transition: all $card-transition-speed;
.text-container {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
//word-break: break-all;
overflow: hidden;
}
}
.card-subtitle {
position: absolute;
bottom: 0%;
//background-color: white;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(0, 255, 185, 0.3) 100%
);
height: 0%;
width: 100%;
font-size: $card-subtitle-fontsize;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0.0178571429em;
box-sizing: border-box;
padding: 0px 20px;
opacity: 0;
transition: all $card-transition-speed;
.text-container {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
//word-break: break-all;
overflow: hidden;
}
}
#media only screen and (max-width: $breakpoint-extralarge) {
.card-main {
flex-basis: calc(100% / 1 - 20px);
}
}
<div class="page-wrapper">
<div class="cards-section">
<div class="card-main">
<div class="card-icon-1"></div>
<div class="card-icon-2"></div>
<div class="card-title">
<div class="text-container"> Card title </div>
</div>
<div class="card-subtitle">
<div class="text-container"> Nulla feugiat elit quis ante molestie fringilla. Donec vulputate lobortis convallis. Sed pellentesque massa nec ex semper blandit. Integer ornare dignissim velit, vel egestas nisl blandit at. Fusce eros lacus, auctor ac ligula vel, gravida pellentesque nibh. Morbi ut ante at elit pulvinar tempus. Ut dui est, aliquam ac lacus sed, pellentesque ultricies turpis. Donec non nisl volutpat, fringilla velit vel, accumsan mi. Phasellus vestibulum pulvinar facilisis. Nam auctor nisi lacus, id blandit lacus aliquet sit amet. </div>
</div>
</div>
<div class="card-main">
<div class="card-icon-1"></div>
<div class="card-icon-2"></div>
<div class="card-title">
<div class="text-container"> Card title </div>
</div>
<div class="card-subtitle">
<div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
</div>
</div>
<div class="card-main">
<div class="card-icon-1"></div>
<div class="card-icon-2"></div>
<div class="card-title">
<div class="text-container"> Card title </div>
</div>
<div class="card-subtitle">
<div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
</div>
</div>
<div class="card-main">
<div class="card-icon-1"></div>
<div class="card-icon-2"></div>
<div class="card-title">
<div class="text-container"> Card title </div>
</div>
<div class="card-subtitle">
<div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
</div>
</div>
</div>
</div>
You can add the following code :
.cards-section {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 20px;
justify-content: center; // Line to add if there is one element per line
}
.card-main:only-child {
margin: 0 auto;
}
To update only one child of a div, you can use the CSS property only-child.
See more in this doc : https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child
just add this in your class
.card-main{
margin: 0 auto;
}
I just cant make this work. I want that sidebar is sticky to the left while i can scroll the main content part. I am using flexboxgrid. It was impossible to me to use position:sticky, and it was impossible for me to hendl that in any way i see that people are doing this thing with flex.
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
code,
em,
img,
small,
strike,
strong,
sub,
sup,
tt,
b,
u,
i,
ol,
ul,
li,
fieldset,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
canvas,
embed,
footer,
header,
nav,
section,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
footer,
header,
nav,
section,
main {
display: block;
}
body {
line-height: 1;
overflow-x: hidden;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input {
-webkit-appearance: none;
border-radius: 0;
}
/* Breakepoints */
/* Uncomment and set these variables to customize the grid. */
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
.col-padding {
padding-right: 1rem;
padding-left: 1rem;
}
.row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
.row.reverse {
flex-direction: row-reverse;
}
.col.reverse {
flex-direction: column-reverse;
}
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-xs {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-xs-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-xs-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-xs-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-xs-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-xs-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-xs-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-xs-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-xs-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-xs-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-xs-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-xs-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-xs-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-xs-offset-1 {
margin-left: 8.333%;
}
.col-xs-offset-2 {
margin-left: 16.667%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-4 {
margin-left: 33.333%;
}
.col-xs-offset-5 {
margin-left: 41.667%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-7 {
margin-left: 58.333%;
}
.col-xs-offset-8 {
margin-left: 66.667%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-10 {
margin-left: 83.333%;
}
.col-xs-offset-11 {
margin-left: 91.667%;
}
.start-xs {
justify-content: flex-start;
text-align: start;
}
.center-xs {
justify-content: center;
text-align: center;
}
.end-xs {
justify-content: flex-end;
text-align: end;
}
.top-xs {
align-items: flex-start;
}
.middle-xs {
align-items: center;
}
.bottom-xs {
align-items: flex-end;
}
.around-xs {
justify-content: space-around;
}
.between-xs {
justify-content: space-between;
}
.first-xs {
order: -1;
}
.last-xs {
order: 1;
}
#media only screen and (768px) {
.container {
width: 720px;
}
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-sm {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-sm-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-sm-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-sm-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-sm-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-sm-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-sm-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-sm-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-sm-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-sm-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-sm-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-sm-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-sm-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-sm-offset-1 {
margin-left: 8.333%;
}
.col-sm-offset-2 {
margin-left: 16.667%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-4 {
margin-left: 33.333%;
}
.col-sm-offset-5 {
margin-left: 41.667%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-7 {
margin-left: 58.333%;
}
.col-sm-offset-8 {
margin-left: 66.667%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-10 {
margin-left: 83.333%;
}
.col-sm-offset-11 {
margin-left: 91.667%;
}
.start-sm {
justify-content: flex-start;
text-align: start;
}
.center-sm {
justify-content: center;
text-align: center;
}
.end-sm {
justify-content: flex-end;
text-align: end;
}
.top-sm {
align-items: flex-start;
}
.middle-sm {
align-items: center;
}
.bottom-sm {
align-items: flex-end;
}
.around-sm {
justify-content: space-around;
}
.between-sm {
justify-content: space-between;
}
.first-sm {
order: -1;
}
.last-sm {
order: 1;
}
}
#media only screen and (min-width: 992px) {
.container {
width: 960px;
}
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-md {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-md-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-md-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-md-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-md-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-md-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-md-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-md-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-md-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-md-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-md-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-md-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-md-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-md-offset-1 {
margin-left: 8.333%;
}
.col-md-offset-2 {
margin-left: 16.667%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-4 {
margin-left: 33.333%;
}
.col-md-offset-5 {
margin-left: 41.667%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-7 {
margin-left: 58.333%;
}
.col-md-offset-8 {
margin-left: 66.667%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-10 {
margin-left: 83.333%;
}
.col-md-offset-11 {
margin-left: 91.667%;
}
.start-md {
justify-content: flex-start;
text-align: start;
}
.center-md {
justify-content: center;
text-align: center;
}
.end-md {
justify-content: flex-end;
text-align: end;
}
.top-md {
align-items: flex-start;
}
.middle-md {
align-items: center;
}
.bottom-md {
align-items: flex-end;
}
.around-md {
justify-content: space-around;
}
.between-md {
justify-content: space-between;
}
.first-md {
order: -1;
}
.last-md {
order: 1;
}
}
#media only screen and (min-width: 1200px) {
.container {
width: 1140px;
}
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-lg {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-lg-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-lg-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-lg-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-lg-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-lg-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-lg-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-lg-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-lg-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-lg-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-lg-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-lg-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-lg-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-lg-offset-1 {
margin-left: 8.333%;
}
.col-lg-offset-2 {
margin-left: 16.667%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-4 {
margin-left: 33.333%;
}
.col-lg-offset-5 {
margin-left: 41.667%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-7 {
margin-left: 58.333%;
}
.col-lg-offset-8 {
margin-left: 66.667%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-10 {
margin-left: 83.333%;
}
.col-lg-offset-11 {
margin-left: 91.667%;
}
.start-lg {
justify-content: flex-start;
text-align: start;
}
.center-lg {
justify-content: center;
text-align: center;
}
.end-lg {
justify-content: flex-end;
text-align: end;
}
.top-lg {
align-items: flex-start;
}
.middle-lg {
align-items: center;
}
.bottom-lg {
align-items: flex-end;
}
.around-lg {
justify-content: space-around;
}
.between-lg {
justify-content: space-between;
}
.first-lg {
order: -1;
}
.last-lg {
order: 1;
}
}
#media only screen and (min-width: 1960px) {
.container {
width: 1920px;
}
.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-xl {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-xl-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-xl-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-xl-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-xl-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-xl-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-xl-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-xl-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-xl-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-xl-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-xl-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-xl-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-xl-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-xl-offset-1 {
margin-left: 8.333%;
}
.col-xl-offset-2 {
margin-left: 16.667%;
}
.col-xl-offset-3 {
margin-left: 25%;
}
.col-xl-offset-4 {
margin-left: 33.333%;
}
.col-xl-offset-5 {
margin-left: 41.667%;
}
.col-xl-offset-6 {
margin-left: 50%;
}
.col-xl-offset-7 {
margin-left: 58.333%;
}
.col-xl-offset-8 {
margin-left: 66.667%;
}
.col-xl-offset-9 {
margin-left: 75%;
}
.col-xl-offset-10 {
margin-left: 83.333%;
}
.col-xl-offset-11 {
margin-left: 91.667%;
}
.start-xl {
justify-content: flex-start;
text-align: start;
}
.center-xl {
justify-content: center;
text-align: center;
}
.end-xl {
justify-content: flex-end;
text-align: end;
}
.top-xl {
align-items: flex-start;
}
.middle-xl {
align-items: center;
}
.bottom-xl {
align-items: flex-end;
}
.around-xl {
justify-content: space-around;
}
.between-xl {
justify-content: space-between;
}
.first-xl {
order: -1;
}
.last-xl {
order: 1;
}
}
html,
body {
font-family: 'Work Sans', sans-serif;
font-size: 100%;
color: #373737;
font-weight: 300;
line-height: 1.4;
}
b,
strong {
font-weight: 700;
}
p {
margin: 0rem;
margin-bottom: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 900;
letter-spacing: 0rem;
margin: 0rem;
}
h1 {
font-size: 3.6rem;
line-height: 1.2;
}
h2 {
font-size: 2.6rem;
line-height: 1.25;
}
h3 {
font-size: 2.4rem;
line-height: 1.3;
}
h4 {
font-size: 2rem;
letter-spacing: -0.08rem;
line-height: 1.35;
}
h5 {
font-size: 1.6rem;
letter-spacing: -0.05rem;
line-height: 1.5;
}
h6 {
font-size: 1.4rem;
letter-spacing: 0;
line-height: 1.4;
}
a {
text-decoration: none;
font-size: 1rem;
font-weight: 400;
}
u {
text-decoration: underline;
}
ul {
list-style-type: none;
}
.height-100 {
height: 100%;
}
html,
body {
height: 100%;
background-color: #fff;
}
#___gatsby {
height: 100%;
}
#gatsby-focus-wrapper {
height: 100%;
}
.fixed {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
aside {
padding: 0;
display: block;
top: 0;
height: 100%;
}
main {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
a {
color: white;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 4px;
transition: background-size cubic-bezier(0, 0.5, 0, 1) 0.3s;
}
a:hover,
a:focus {
text-decoration: none;
background-size: 100% 4px;
}
nav {
height: 100%;
display: flex;
background: #1792B9;
color: #fff;
width: 100%;
padding: 2rem;
position: relative;
align-items: flex-end;
justify-content: left;
}
<html>
<body>
<div id="___gatsby">
<div tabindex="-1" id="gatsby-focus-wrapper" style="outline: none;">
<div class="row height-100">
<aside class="col-xs-4 col-lg-4 col-xl-3">
<nav>
<div class="box">
<h1>Test</h1>
<p>Lorem</p>
<ul>
<li>About</li>
</ul>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</nav>
</aside>
<main id="homepage" class="col-xs-8 col-lg-8 col-xl-6">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam augue. Aliquam sed mauris id lacus fermentum gravida sit amet at mauris. Nullam auctor consectetur rhoncus. Quisque tincidunt nisl a ultrices consectetur. Aenean vel lectus
sit amet enim tempor vestibulum. Sed id lacus feugiat, commodo eros aliquet, hendrerit nibh. Aliquam ullamcorper magna vitae sagittis hendrerit. Cras lacinia cursus ipsum, ac condimentum ex molestie eget.</p>
<p>Vestibulum mollis ipsum sed elit laoreet, ut pellentesque nibh sodales. Nam pellentesque est ut magna suscipit ornare non eu dolor. Suspendisse id nisl eros. Ut lorem lectus, finibus at sodales id, convallis sed velit. Sed feugiat eu elit
eu porttitor. Donec elementum, nibh at malesuada bibendum, tellus nibh congue est, et congue eros elit at sem. Morbi hendrerit augue nec commodo mollis. Cras nisl dolor, vulputate ut aliquam a, euismod vel lorem. Vivamus interdum sapien
ut sapien elementum, ut facilisis velit vulputate. Maecenas vel nisl odio.</p>
<p>Etiam rutrum at dui quis porta. Proin blandit et velit consectetur vulputate. Pellentesque fringilla varius cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque euismod consectetur malesuada.
In hac habitasse platea dictumst. Phasellus pharetra tortor eget nibh condimentum, ut gravida sem vulputate. Praesent placerat urna ut viverra viverra. Morbi dolor tortor, tristique fermentum magna a, blandit aliquet mauris. Aliquam hendrerit
ipsum porttitor magna ultricies, sit amet accumsan felis aliquam. Aenean vel quam imperdiet erat fringilla euismod. Cras vitae turpis pulvinar nisl condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Pellentesque ut ultricies libero. Suspendisse varius ligula at ex tempor porta.</p>
<p>Mauris at lacus nec ligula rutrum venenatis. Duis magna enim, mollis eget odio eu, luctus tempor augue. Quisque laoreet ante vel ipsum scelerisque, a placerat dolor sagittis. Pellentesque mollis mi quis metus pretium, sed elementum erat ultrices.
Ut commodo tempus massa a interdum. Maecenas non massa sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ante lacus, laoreet vel sapien a, luctus convallis lectus. Suspendisse nec tortor sit amet eros pretium semper a
at turpis. Praesent at facilisis ante. Pellentesque condimentum laoreet lacus, sed hendrerit sapien auctor eu. Sed ac volutpat risus. Nunc sodales dolor et aliquam sollicitudin. Maecenas efficitur, urna a condimentum volutpat, ligula erat
sollicitudin nisl, sit amet rhoncus nisi tortor nec neque. Mauris commodo leo sed justo consectetur, pretium rutrum nisi fermentum.</p>
<p>Nulla sem neque, varius sed eleifend nec, volutpat eu elit. Vivamus ornare a diam a porta. Vestibulum gravida commodo vestibulum. Nunc ultrices quam sed nunc facilisis sagittis. Quisque placerat suscipit odio id congue. Quisque blandit vitae
orci eget varius. Etiam scelerisque tincidunt sapien quis auctor. Donec enim lectus, semper ut libero ultricies, fermentum ultricies orci. Sed congue tincidunt leo nec pretium. Etiam dignissim feugiat pellentesque. Aenean vitae mauris libero.
Mauris erat eros, vehicula eget maximus nec, sagittis non nibh. Nunc pharetra massa nec massa blandit blandit.</p>
<p>Maecenas bibendum turpis tellus, vitae tempus mi feugiat vel. Praesent tristique mi ac venenatis bibendum. Donec congue, sem at interdum fringilla, risus quam molestie nibh, hendrerit tempus risus enim at velit. Integer consectetur nisi id
consequat faucibus. Morbi est lacus, eleifend non vulputate nec, egestas sit amet arcu. Proin aliquam, arcu interdum vehicula suscipit, lacus lacus elementum tortor, sed rutrum enim dui vestibulum libero. Fusce tempor diam sed interdum iaculis.
Quisque vestibulum metus ac magna maximus lacinia. Proin ut tincidunt magna, sed molestie elit. Praesent eu interdum justo. Maecenas vel mauris odio.</p>
<p>Curabitur egestas hendrerit turpis vel lobortis. Nam sit amet porttitor urna, sed mattis leo. Duis a justo suscipit, aliquam urna ut, iaculis nibh. Morbi tincidunt, sem eget luctus condimentum, tellus justo tincidunt odio, sit amet pretium
metus odio id odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed elementum purus id lacus mattis sodales. Fusce id scelerisque nibh, nec mattis dui. Cras tristique, urna sit amet semper
tempor, libero tellus pretium diam, sit amet dignissim massa turpis ut erat. Nunc congue urna felis. Duis quis mattis mauris.</p>
<p>Cras rutrum tellus ante. Pellentesque tincidunt, enim efficitur pharetra porta, mauris justo dignissim erat, in lacinia dolor risus sed quam. Aliquam laoreet maximus dolor, a tincidunt lorem. Praesent vel facilisis odio, sit amet convallis
urna. Nullam vehicula tincidunt nunc, commodo lobortis ligula euismod eget. Praesent fringilla libero at nulla bibendum, id posuere ligula iaculis. Nulla ultrices ultricies felis, et eleifend diam elementum sed. Suspendisse tortor velit,
mollis sit amet sapien ac, porta tincidunt dui. Aliquam felis odio, lobortis pulvinar lacus ac, vulputate malesuada dolor. Proin eleifend risus sit amet augue blandit sollicitudin. Nam vitae finibus sem, id ornare sapien. Aliquam posuere
libero dolor, sed efficitur elit fermentum vitae. Nullam pretium mi at sem fringilla aliquet. Nullam aliquet eget purus eu sodales.</p>
<p>Vestibulum varius mauris eu turpis pharetra pulvinar. Etiam placerat ut risus a imperdiet. Aenean elementum velit vel dui viverra, eu tempor lectus rutrum. Ut dapibus felis in odio aliquet viverra. Nullam euismod id ex ut commodo. Phasellus
iaculis cursus nibh sit amet finibus. Integer viverra est non lacus finibus, non euismod enim accumsan. Phasellus lacinia, eros eu suscipit placerat, eros risus varius sem, ut condimentum urna velit in purus. Donec dictum turpis nec lacinia
malesuada. Nam placerat dapibus tincidunt. Sed sed laoreet justo. Quisque laoreet quis ex quis rhoncus. Duis sed consequat neque. Integer viverra vel est ut mollis. Curabitur id fringilla odio.</p>
<p>Morbi porta eu arcu in blandit. Nam metus nulla, sollicitudin a lacinia in, viverra non ipsum. Ut egestas metus ac risus vestibulum scelerisque. Quisque nec felis at nisl mollis mollis. Aliquam convallis interdum tempor. Curabitur at tortor
metus. Aliquam et consequat neque, euismod vulputate erat. Donec orci nibh, faucibus ultrices lacinia a, laoreet vel nisi. Nam at neque velit. Maecenas ultrices elementum orci eu commodo. Sed maximus magna posuere odio ornare tincidunt.
Pellentesque ultrices et magna id pretium. Vestibulum vulputate ex nec risus efficitur, vitae iaculis justo eleifend. Duis metus sapien, imperdiet a neque vitae, pretium dictum nunc.</p>
</div>
</main>
</div>
</div>
<div id="gatsby-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0px; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"></div>
</div>
</body>
</html>
anyone know how to fix this?
Try adding to the parent element that you need to be sticky:
position: -webkit-sticky; position: sticky; top:0; align-self: flex-start;
I am trying to find a solution to the following:
<style>#about {
width: 100px;
margin: 10px;
padding: 5px;
text-align: center;
background: #D7D8A2;
border: 0.1em dotted #7A7A7A;
position: absolute;
left: -9px;
top: 105px;
z-index: 15;
}
#about-ct {
width: 95%;
height: 80px;
margin: 10px;
background: #FFFFFF;
border: 0.1em dotted #7A7A7A;
position: relative;
top: -35px;
z-index: 12;
}
</style>
<section id="section">
<div id="about">About</div>
<div id="about-ct">Lorem ipsum...</p></div>
</section>
This will produce something like this:
I would like to achieve the following without (if possible) <br><p style="text-indent:6em;">
So far I wasn't able to figure this out,
Thanks for any help!
<style>
#about {
width: 100px;
margin: 10px;
padding: 5px;
text-align: center;
background: #D7D8A2;
border: 0.1em dotted #7A7A7A;
position: absolute;
top: 13px;
z-index: 100;
background-color: #db4344;
color: #fff;
z-index: 15;
}
#about{
position: absolute;
top: 13px;
z-index: 100;
background-color: #db4344;
color: #fff;
z-index: 15;
}
#about-ct {
width: 95%;
height: auto;
margin: 10px;
background: #FFFFFF;
border: 0.1em dotted #7A7A7A;
top: -35px;
z-index: 12;
text-indent: 55px;
}
</style>
<section id="section">
<div id="about">About</div>
<div id="about-ct">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor vitae ligula interdum auctor. Donec commodo purus ultrices turpis aliquet, quis sodales nisi euismod. Nunc libero metus, lobortis quis mi sit amet, placerat volutpat enim. Cras libero arcu, aliquam quis rhoncus id, aliquet nec nunc. Pellentesque vel ligula in magna feugiat gravida. Morbi aliquam, diam et fermentum iaculis, mauris risus tristique elit, sit amet ullamcorper diam mi non odio. Nulla facilisi. Cras malesuada justo felis, vitae laoreet justo facilisis nec. Fusce sit amet facilisis ex, sed laoreet nibh. Nulla sit amet justo nisi. Cras eu dui blandit, aliquam velit eget, blandit lacus. Etiam non turpis ut tellus aliquet sodales eu sagittis urna. Nullam et pretium lorem..</p></div>
</section>
This has had me for at least three hours now. I can't figure it.
I have a css menu overlay:
#toggle-nav-label {
text-align: center;
display: block;
cursor: pointer;
position: relative;
z-index: 8500; /* to keep hamburger above all */
width: 30px;
height: 25px;
margin-top: 40px;
background-color: transparent
}
#menu .menu-container {
position: fixed;
overflow: hidden;
z-index: -1; /* minimal z-index here */
opacity: 0;
width: 100%;
height: 101%;
left: 0px;
top: 0px;
background: #e39c37;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out
}
#menu .menu-container .menu-area {
padding-left: 4%
}
#menu ul {
position: absolute;
top: 40%
}
#menu ul li {
margin: 0px 0px 9px 0px
}
#wrapper {
max-width: 1200px;
margin: 0;
padding-top: 100px;
padding-left: 3%;
position: relative;
z-index: 1000 /* more z-index than expanded overlay */
}
and some HTML
<header id="header">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav">
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
</label>
<script>
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
});
});
</script>
<div class="menu-container">
<div class="menu-area">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="wrapper">
Rest of page..
<footer>
</footer>
The .menu-container z-index is set to -1, and the wrapper has a higher z-index, but as it stands at the moment I can click the menu-overlay li links even when the menu is collapsed? Its opacity is also set to 0?
I am unable to highlight text when the menu is collapsed too. Why is this?
I did add a visibility: hidden to .menu-container, I could then select text within the wrapper, but I do not get an ease-in-out effect when the menu is toggled.
This SO article here, warns that a position: relative (positioning in general) is required for z-index elements. I have position on both.
https://jsfiddle.net/9ohpttL3/1/
If I understand the end goal, use a margin-top on #wrapper instead of padding-top, then you only need a z-index on your toggle button so it will appear over .main-container, then when you display the menu, add a z-index to header.
$(document).ready(function() {
$('#nav-icon').on('click', function() {
var $header = $('#header');
if ($header.hasClass('open')) {
$header.removeClass('open').one('transitionend', function() {
$header.removeClass('front');
});
} else {
$header.addClass('open front');
}
});
});
/*Header */
header {
position: fixed;
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 1.00);
color: #000;
top: 0;
padding: 0;
}
.front {
z-index: 1;
}
.front #menu .menu-container {
height: 101%;
}
header a:link {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-decoration: none;
min-width: 100%;
color: #000;
}
header a:hover {
color: #eaab00;
}
#header-area {
max-width: 1200px;
padding-left: 3%;
margin: 0
}
.header-logo {
font-family: 'Neue Helvetica W01', sans-serif;
font-size: 15px;
letter-spacing: 3px;
margin-top: 35px;
margin-left: 3px;
display: inline-block;
cursor: pointer;
}
/* Nav */
nav {
float: right;
margin: 0;
padding: 0;
display: inline-block;
}
#toggle-nav-label {
text-align: center;
display: block;
cursor: pointer;
position: relative;
z-index: 2;
width: 30px;
height: 25px;
margin-top: 40px;
background-color: transparent
}
#menu .menu-container {
position: fixed;
overflow: hidden;
opacity: 0;
width: 100%;
left: 0px;
top: 0px;
background: #e39c37;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
height: 0;
}
#menu .menu-container .menu-area {
padding-left: 4%
}
#menu ul {
position: absolute;
top: 40%
}
#menu ul li {
display: block;
font-size: 50px;
line-height: 55px;
font-weight: 600;
margin: 0px 0px 9px 0px;
}
#menu li a {
text-decoration: none;
color: #000;
}
#menu .menu-footer {
position: absolute;
bottom: 45px;
width: 90%;
}
#toggle-nav {
display: none;
}
#toggle-nav:checked ~ .menu-container {
opacity: 1;
}
#nav-icon {
width: 30px;
height: 25px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #000;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(2) {
top: 6px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(3) {
top: 12px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.open #nav-icon span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -6px;
left: 4px;
background-color: rgba(255, 255, 255, 1.00)
}
.open #nav-icon span:nth-child(2) {
width: 0%;
opacity: 0;
}
.open #nav-icon span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 15px;
left: 4px;
background-color: rgba(255, 255, 255, 1.00)
}
/* Wrapper */
#wrapper {
max-width: 1200px;
margin: 0;
margin-top: 100px;
padding-left: 3%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header id="header">
<div id="header-area">
<nav id="menu">
<input type="checkbox" id="toggle-nav" />
<label id="toggle-nav-label" for="toggle-nav">
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
</label>
<div class="menu-container">
<div class="menu-area">
<ul>
<li>Case Studies</li>
<li>About</li>
<li>Journal</li>
<li>Contact</li>
</ul>
<div class="menu-footer">
Footer
</div>
</div>
</div>
</nav>
</div>
</header>
<div id="wrapper">
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis, nunc aliquet vulputate tempus, diam ante semper dui, id porta velit neque quis libero. Sed eget enim vehicula augue aliquam efficitur. Aliquam nec mauris nulla. Nunc viverra velit
et lectus vulputate blandit. Suspendisse dignissim hendrerit ex sit amet euismod. Morbi nec auctor dui. In sollicitudin sem in dolor tempus, in dictum ligula finibus. Vestibulum auctor turpis quis aliquam consectetur. Donec ullamcorper lacinia odio,
et sodales odio vestibulum at. Phasellus pharetra metus eget augue tempus, quis vestibulum mauris sollicitudin. Phasellus eget ullamcorper sapien. Sed dolor metus, pellentesque quis metus vel, eleifend tincidunt mauris. Aliquam erat volutpat. Vivamus
sit amet libero dolor. Mauris sollicitudin lorem vel justo vestibulum fringilla. Donec consequat molestie lobortis. Aliquam id neque vulputate, cursus nunc at, consectetur arcu. Phasellus consequat fermentum purus eget laoreet. Proin pulvinar tellus
sem, ut porttitor velit molestie nec. Nullam consectetur leo metus, nec consequat nibh auctor sit amet. Sed vel malesuada elit. Praesent consequat est mauris, ac interdum metus posuere et. In dictum volutpat ex sed mattis. Nulla et est vel sem rutrum
faucibus. Quisque nulla mi, blandit dictum mattis in, semper in diam. Nullam auctor consequat nunc, vitae lobortis justo ullamcorper non. Quisque bibendum metus id elit gravida, at vulputate nibh placerat. Nulla a nulla dignissim, vulputate nunc eu,
congue ex. Morbi eu diam ultrices, efficitur nisi sit amet, cursus augue. Maecenas pellentesque metus ligula, eu aliquam lorem molestie vel. Ut ac enim et odio lacinia eleifend quis commodo eros. Fusce sed pharetra sem. In blandit, augue et rutrum
cursus, nulla nibh consequat ligula, elementum rhoncus lectus dui a sapien. In at felis bibendum nulla varius porta. Sed ultrices lacus sapien, in vehicula erat interdum nec. Praesent faucibus rutrum eros quis placerat. Morbi tincidunt justo nec nisl
mattis, auctor vulputate magna volutpat. Suspendisse potenti. Nulla a accumsan lorem. Maecenas sed elit in orci tempor congue. Morbi ut velit et ante interdum posuere. Nam efficitur pulvinar arcu quis tempus. Pellentesque elementum aliquam erat id
ultricies. Sed maximus dui elit, at posuere dolor pretium a. Integer tellus massa, accumsan id dapibus vitae, tincidunt id odio. Nam in nunc lectus. Sed magna augue, suscipit eu lectus bibendum, euismod tempor elit. Etiam sit amet viverra sem, ut
dapibus sem. Duis rutrum est sit amet luctus finibus. Nam velit dolor, pharetra non justo at, lobortis consectetur nisl. Duis ut nunc vitae sem egestas elementum vel a leo. Phasellus convallis fringilla mi, et rhoncus lectus suscipit et. Fusce tincidunt
leo sed ex feugiat, ut rutrum felis molestie. Duis libero mi, fringilla ut cursus sed, lacinia vitae lorem. Cras cursus euismod enim, ac rhoncus mi dapibus ac. Praesent et suscipit magna, nec eleifend lectus. Sed vitae enim blandit, elementum enim
eu, hendrerit quam. Nulla sit amet dolor at libero feugiat commodo. Sed eu orci et ante ullamcorper faucibus. Suspendisse tincidunt cursus lacus, non elementum nibh accumsan quis. Etiam ligula velit, aliquet ac lobortis et, efficitur ac dolor. Etiam
rutrum eget dui ac consequat. Suspendisse consequat placerat odio, in sodales orci facilisis non. Sed tempus leo vitae dui euismod, a consectetur dolor consectetur.
</main>
<footer>
</footer>
</div>
Anyone know how this can be done? I'm trying to make it so the text inside my button is vertically alligned. Looks silly atm. Sorry if the code is messy I'm really new to all of this. If anyone can help I would greatly appreciate it, spent hours trying to do this!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>I'M JACOB</title>
<meta name="description" content="I'm Jacob">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Lobster" rel="stylesheet">
</head>
<body>
<nav class="fixed-nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="box"><h1>Hello World!</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui urna, pellentesque sed consectetur nec, maximus placerat mauris. Donec ultrices elementum augue, et rutrum est elementum sed. Duis sit amet varius eros. Sed nunc velit, congue a bibendum ac, cursus eget velit. Maecenas bibendum eleifend arcu. Morbi at neque at ex interdum tempus. In vitae mauris urna. Integer sit amet suscipit libero. Cras ultricies tincidunt commodo. Nam vel leo rhoncus, facilisis orci a, tempus nisi. Suspendisse porta est nunc, ut malesuada quam ultrices vitae. Aliquam diam ligula, auctor a elementum sit amet, convallis et nibh. In hac habitasse platea dictumst. Mauris semper vel ipsum eget convallis.</p></div><br>
Push Me
<div class="footer">Coded from scratch by Jacob in HTML & CSS.<br>All rights reserved ©</div>
</body>
CSS
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #FF8E8E;
box-shadow: 0px 2px 0px #FFC8C8;
}
li {
float: left;
list-style: none;
}
li a {
display: block;
color: white;
font-family: sans-serif;
font-size: 14px;
text-align: center;
padding: 0px 16px;
text-decoration: none;
}
.box {
position: absolute;
width: 800px;
height: 400px;
z-index: 15;
top: 30%;
left: 50%;
margin: -100px 0 0 -400px;
background: transparent;
text-align: center;
font-family: sans-serif;
font-size: 14px;
color: darkgray
}
.footer {
position: absolute;
height: 25px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
font-family: sans-serif;
font-size: 13px;
color: darkgrey
}
.button {
display: block;
margin:0 auto;
width: 150px;
height: 50px;
margin-top: 20%;
border: 1px solid;
border-color: darkturquoise;
border-radius: 5px;
text-align: center;
line-height: 22px;
font-size: 16px;
font-family: sans-serif;
background-color: darkturquoise;
color: white;
}
You can use display: flex; justify-content: center; align-item: center; to vertically and horizontally center something. This is a good reference https://www.w3.org/Style/Examples/007/center.en.html
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #FF8E8E;
box-shadow: 0px 2px 0px #FFC8C8;
}
li {
float: left;
list-style: none;
}
li a {
display: block;
color: white;
font-family: sans-serif;
font-size: 14px;
text-align: center;
padding: 0px 16px;
text-decoration: none;
}
.box {
position: absolute;
width: 800px;
height: 400px;
z-index: 15;
top: 30%;
left: 50%;
margin: -100px 0 0 -400px;
background: transparent;
text-align: center;
font-family: sans-serif;
font-size: 14px;
color: darkgray
}
.footer {
position: absolute;
height: 25px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
font-family: sans-serif;
font-size: 13px;
color: darkgrey
}
.button {
display: block;
margin: 0 auto;
width: 150px;
height: 50px;
margin-top: 20%;
border: 1px solid;
border-color: darkturquoise;
border-radius: 5px;
text-align: center;
line-height: 22px;
font-size: 16px;
font-family: sans-serif;
background-color: darkturquoise;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
<nav class="fixed-nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="box">
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui urna, pellentesque sed consectetur nec, maximus placerat mauris. Donec ultrices elementum augue, et rutrum est elementum sed. Duis sit amet varius eros. Sed nunc velit, congue a bibendum
ac, cursus eget velit. Maecenas bibendum eleifend arcu. Morbi at neque at ex interdum tempus. In vitae mauris urna. Integer sit amet suscipit libero. Cras ultricies tincidunt commodo. Nam vel leo rhoncus, facilisis orci a, tempus nisi. Suspendisse
porta est nunc, ut malesuada quam ultrices vitae. Aliquam diam ligula, auctor a elementum sit amet, convallis et nibh. In hac habitasse platea dictumst. Mauris semper vel ipsum eget convallis.</p>
</div><br>
Push Me
<div class="footer">Coded from scratch by Jacob in HTML & CSS.<br>All rights reserved ©</div>
One way to do this is to set the line-height equal to the height of the button.
.button {
display: block;
margin:0 auto;
width: 150px;
height: 50px;
line-height: 50px;
margin-top: 20%;
border: 1px solid;
border-color: darkturquoise;
border-radius: 5px;
text-align: center;
font-size: 16px;
font-family: sans-serif;
background-color: darkturquoise;
color: white;
}
Push Me