This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 4 years ago.
I've tried vertical-align: middle; and margin: auto 0; but it doesn't seem to be working? Is there something I'm missing here? My logic is, I put the vertical-align: middle; in the parent container. Shouldn't that center the "children" class into the center vertically? I've also tried adding, padding:auto 0; to the "children" class but that didn't seem to do anything either...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: block;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
Try to use display:flex here in the parent class .content and margin:auto in .children class to center it horizontally and vertically...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
.content .children {
margin: auto;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
However vertical-align works on tables with display:table-cell...and also you will need to apply vertical-align:middle in the elements itself not in the parent
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: table;
width: 100%;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
}
.content .children {
vertical-align: middle;
display: table-cell;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
font-size: 50px;
}
.btn{
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover{
background-color: #38ada9;
cursor: pointer;
}
.content{
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
width:100%;
font-family: helvetica;
justify-content:center;
align-items:center;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
use flex method to vertical align.
https://jsfiddle.net/raj_mutant/529bcr98/
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I am learning CSS grid. While practicing I got an issue. justify-content: center is not centering section-3-nav div.
Here is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'Roboto', sans-serif;
}
.container {
width: 85%;
margin: auto;
padding: 3rem 0;
}
.container > .constant {
display: grid;
justify-items: center;
}
.box-top-title > h1 {
font-weight: bold;
margin-top: 2rem;
}
.box-top-subtitle > p {
text-transform: uppercase;
color: #a8b9c0;
margin: 0.5rem 0;
font-size: 15px;
}
.box-top-hr > hr {
width: 250px;
background-color: #00c6bf;
border-width: 0;
height: 1.5px;
}
.section-3 {
background: #eff7fa;
width: 100%;
}
.section-3 > .container > .section-3-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-content: center;
margin: 3rem 0;
width: 50%;
border: 1px solid black;
}
.section-3 > .container > .section-3-nav a {
transition: 0.5s;
}
.section-3 > .container > .section-3-nav a:hover {
background: #ff3150;
padding: 10px 20px;
border-radius: 15px;
color: white;
}
<div class="section-3">
<div class="container">
<div class="constant">
<div class="box-top-img"><img src="./images/2-Bondi---PSD-Landing-Page.png" alt=""></div>
<div class="box-top-title"><h1>We Make This</h1></div>
<div class="box-top-subtitle"><p>Prepare to be amazed</p></div>
<div class="box-top-hr"><hr></div>
</div>
<div class="section-3-nav">
<div>All</div>
<div>Design</div>
<div>Code</div>
<div>Photography</div>
<div>Apps</div>
</div>
<div class="section-3-stuffs">
</div>
</div>
</div>
Where is the problem with the code? Where to fix and what to fix?
It will be very helpful for me if you help to solve the problem.
Thank you.
Usually you should think about positioning an element from the perspective of the parent element, not the element itself.
If you want to center the section-3-nav element as part of a grid layout, you have to either
Do it in the parent element (.container) with justify-content: center or
Use justify-self: center in the element itself
In both cases, the parent element (.container) has to use display: grid, too.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'Roboto', sans-serif;
}
.container {
width: 85%;
margin: auto;
padding: 3rem 0;
}
.container > .constant {
display: grid;
justify-items: center;
}
.box-top-title > h1 {
font-weight: bold;
margin-top: 2rem;
}
.box-top-subtitle > p {
text-transform: uppercase;
color: #a8b9c0;
margin: 0.5rem 0;
font-size: 15px;
}
.box-top-hr > hr {
width: 250px;
background-color: #00c6bf;
border-width: 0;
height: 1.5px;
}
.section-3 {
background: #eff7fa;
width: 100%;
}
.section-3 > .container > .section-3-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
text-align: center;
margin: 3rem 0;
width: 100%;
border: 1px solid black;
}
.section-3 > .container > .section-3-nav a {
transition: 0.5s;
}
.section-3 > .container > .section-3-nav a:hover {
background: #ff3150;
padding: 10px 20px;
border-radius: 15px;
color: white;
}
<div class="section-3">
<div class="container">
<div class="constant">
<div class="box-top-img"><img src="./images/2-Bondi---PSD-Landing-Page.png" alt=""></div>
<div class="box-top-title"><h1>We Make This</h1></div>
<div class="box-top-subtitle"><p>Prepare to be amazed</p></div>
<div class="box-top-hr"><hr></div>
</div>
<div class="section-3-nav">
<div>All</div>
<div>Design</div>
<div>Code</div>
<div>Photography</div>
<div>Apps</div>
</div>
<div class="section-3-stuffs">
</div>
</div>
</div>
I am presuming you want to center the div to the page itself.
Try adding:
margin: auto;
It would center the div when used with width: 50%; Else, it would stretch and center.
I was wondering how I can position the text centered horizontally. Centered horizontally with the image. I do not want to use the position: absolute attribute. This is because the length of the right and left text can change and to have an absolute attribute, you need a fixed width/size.
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
You can use flexbox to align items horizontally center by adding below code to the parent div
.parent{
display:flex;
align-items: center;
}
This is the running Snippet of your code having this changes
body{
padding: 0;
margin: 0;
font-family: arial;
}
.content{
display: flex;
align-items: center;
}
.right-text {
font-size: 13px;
}
.icon {
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
font-size: 13px;
font-weight: 700;
}
<div class="content">
<div class="right-text">Right</div>
<div class="icon"></div>
<div class="left-text">Left</div>
</div>
You can just simply add a flexbox container and set its property align-items to center.
<div class="container">
<div class="right-text">Right</div>
<div class="icon"></div>
<div class="left-text">Left</div>
</div>
And this is the class container:
.container{
display: flex;
align-items: center;
justify-content: center;
}
Hi If you want vertical align here is the updated snippet
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
top: 10px;
margin: 0 5px;
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
You actually need to wrap your right-text, icon and left-text element in childContainer and then wrap your childContainer element in parentContainer wrap.
<div class="parentContainer">
<div class="childContainer">
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
</div>
</div>
Next, you have to apply FlexBox with center justify-content and align-items value and you also need to add height: 100vh. Mentioned changes are applied on a below code snippet. Try this I hope it'll help you out. Thanks
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
.parentContainer {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
<div class="parentContainer">
<div class="childContainer">
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
Closed 4 years ago.
I am centering inner div insTabsContainer using margin: 0 auto but it's not getting center. Will you guys tell me what's I did wrong here.
HTML
.insTabsContainer {
margin: 0 auto;
}
.insTabs {
position: relative;
float: left;
width: 32%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
<div class="col-sm-12">
<div class="insTabsContainer">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
you can use flex. for this.
.insTabsContainer {
display: flex;
justify-content: center;
}
.insTabs {
position: relative;
float: left;
width: 25%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
.insTabs:last-child {
margin-right:0;
}
<div class="col-sm-12">
<div class="insTabsContainer">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
if you use
margin: 0 auto;
it should have a width, but you can use simply
display:table;
.insTabsContainer {
display:table;
margin: 0 auto;
}
You should set width in order to see that it's center:
.insTabsContainer {margin: 0 auto; width: 90%;}
You can achieve this using flex-box
.insTabsContainer {
}
.insTabsContainer:after {
content: "";
display: table;
clear: both;
}
.insTabs {
position: relative;
float: left;
width: 10%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
.text-center {
text-align: center;
}
.d-flex {
display: flex;
justify-content: center;
}
<div class="col-sm-12 text-center">
<div class="insTabsContainer d-flex">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
so I am doing this project and i've started to run into problems with display properties and elements not positioning as i would want them to. Here's what i have so far: https://codepen.io/benasl/pen/zdMbKQ
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
}
.below {
display: flex;
clear: both;
width: 50%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
</div>
</div>
</div>
Everything was okay before i added the .below class with all its content, what i need is .left to be on the left and .rightto be in the right..
I've tried all sorts of display properties, none of them seem to work.
Note, your markup and CSS can be cleaned up a lot, though I choose not to do that for your.
If you move the .below element's into each .left/.right element, add flex-wrap: wrap to the .left/.right rules, and use calc() for the aside's width (so it take border/margin into account), you'll get a good start of both see how Flexbox works and to restructure your markup.
Updated codepen
Stack snippet
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
flex-wrap: wrap;
}
.below {
display: flex;
clear: both;
width: 100%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
flex-wrap: wrap;
}
aside {
width: calc(40% - 18px);
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
margin-right: 15px;
}
section {
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>
Add display: flex to the wrapper.
Wrap top left content in a new wrapper (in this case .left-top) to separate it from below.
Separate left and right and add flex-direction: column to stack left-top and below.
*Avoid mixing flex and float
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin: 0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: flex;
width: 100%;
}
.left {
padding-right: 10px;
border-right: 1px solid #797977;
display: flex;
}
.below {
display: flex;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size: bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background: #868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border: none;
color: #c3c3c2;
cursor: pointer;
transition: all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
.left,
.right {
flex-direction: column;
}
<div id="container">
<div class="wrapper">
<div class="left">
<div class="left-top">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>
Why can I center a button with flex but not a link?
#quote-btn-div {
display: flex;
}
#quote-btn,
#twitter-link {
background-color: #999;
/* Green */
border: none;
width: 300px;
height: 100px;
margin: 0 auto;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#twitter-link {
background-color: red;
}
<div id="quote-box">
<div id="quote-btn-div">
<button id="quote-btn">New Quote</button>
<a id="twitter-link">Twitter link</a>
</div>
</div>
Sorry if this is a stupid question, I'm still learning.
line-height is often used to vertically center a single line of text. Since you have set a height on your button, set line-height to that value.
#twitter-link { line-height: 100px; }
#quote-btn-div {
display: flex;
}
#quote-btn,
#twitter-link {
background-color: #999;
/* Green */
border: none;
width: 300px;
height: 100px;
margin: 0 auto;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#twitter-link {
background-color: red;
line-height: 100px;
}
<div id="quote-box">
<div id="quote-btn-div">
<button id="quote-btn">New Quote</button>
<a id="twitter-link">Twitter link</a>
</div>
</div>
#twitter-link {
line-height: 100px;
}