This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 25 days ago.
centering the div to be center to the webpage.
This has been asked a hundred times before, and yet I'm still having trouble finding the exact answer.
I'm trying to center this div exactly center of the page. I've set justify-content and align-items to center, but it not showing the expected result. I'm sure I'm missing something, but what?
body {
display: flex;
justify-content: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
border: 5px solid black;
width: 50vh;
height: auto;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.buttons {
display: flex;
padding: 10px;
margin-top: 10px;
}
<div class="box">
<div class="content">
<h1 class="header">BLACKJACK</h1>
<p id="message-el" class="message">What to play a round? </p>
<p id="cards-el" class="cards">Cards:</p>
<p id="sum-el" class="sum">Sum:</p>
<div class="buttons">
<button id="button-start-el" class="button-start">START GAME</button>
<button id="button-draw-el" class="button-draw">DRAW CARD</button>
<button id="button-new-el" class="button-new">NEW GAME</button>
</div>
</div>
</div>
<script src="/js/javascript.js"></script>
</body>
Set body to 100vh and add align-items: center;.
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
display: flex;
justify-content: center;
align-items: center;
border: 5px solid black;
width: max-content;
padding: 1em 2em;
height: auto;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.buttons {
display: flex;
padding: 10px;
margin-top: 10px;
}
<body>
<div class="box">
<div class="content">
<h1 class="header">BLACKJACK</h1>
<p id="message-el" class="message">What to play a round? </p>
<p id="cards-el" class="cards">Cards:</p>
<p id="sum-el" class="sum">Sum:</p>
<div class="buttons">
<button id="button-start-el" class="button-start">START GAME</button>
<button id="button-draw-el" class="button-draw">DRAW CARD</button>
<button id="button-new-el" class="button-new">NEW GAME</button>
</div>
</div>
</div>
<script src="/js/javascript.js"></script>
</body>
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I horizontally center an element?
(133 answers)
Closed 12 months ago.
I have basic card design. But I need this cards in a row. So I use inline-block. But at that time, "align-items: center" is not working. I check the old questions, they said use display: table. But table is disrupts inline-block.
What should I do to work centering?
.card-daily {
text-align: center;
margin-bottom: 5%;
}
.card-daily-item {
display: inline-block;
text-align: center;
align-items: center;
background-color: #e3ffee;
border-radius: 25px;
width: 19em;
height: 7em;
}
<div class="card-daily">
<div class="card-daily-item">
<div class="card-body-daily">Stuff<br />1200$</div>
</div>
<div class="card-daily-item">
<div class="card-body-daily">Some Stuff<br />500$</div>
</div>
</div>
You can do it with flex box.
.card-daily {
display: flex;
justify-content: center;
gap: 10px;
}
.card-daily-item {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #e3ffee;
border-radius: 25px;
width: 19em;
height: 7em;
}
<div class="card-daily">
<div class="card-daily-item">
<div class="card-body-daily">Stuff<br />1200$</div>
</div>
<div class="card-daily-item">
<div class="card-body-daily">Some Stuff<br />500$</div>
</div>
</div>
You can check my changes here
display: flex; in .card-daily is for row display
display: flex; in .card-daily-item is for text centralization setup
margin: auto; in .card-body-daily is for text centralization (from both sides of top and left)
.card-daily {
text-align: center;
margin-bottom: 5%;
display: flex;
}
.card-daily-item {
display: flex;
background-color: #e3ffee;
border-radius: 25px;
width: 19em;
height: 7em;
}
.card-body-daily {
margin: auto;
}
<div class="card-daily">
<div class="card-daily-item">
<div class="card-body-daily">Stuff<br />1200$</div>
</div>
<div class="card-daily-item">
<div class="card-body-daily">Some Stuff<br />500$</div>
</div>
</div>
If you want to have better understanding, you can look into this article
https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox
Hopefully, my answer is useful for you.
First of all, I recommend you to read about display {flex} as it should help you a lot and this property will save a lot of your time.
Secondly, Try this snippet of code and it should work fine:
.card-daily {
text-align: center;
margin-bottom: 5%;
display: flex;
justify-content: center;
}
.card-daily-item {
text-align: center;
background-color: #e3ffee;
border-radius: 25px;
width: 19em;
height: 7em;
}
<div class="card-daily">
<div class="card-daily-item">
<div class="card-body-daily">Stuff<br />1200$</div>
</div>
<div class="card-daily-item">
<div class="card-body-daily">Some Stuff<br />500$</div>
</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How to Right-align flex item?
(13 answers)
Closed 2 years ago.
I tried to align the Add to library div to the right with float: right style but it does not seem to work. How to align that div to the right of the flex. Could anyone please help?
.song {
display: flex;
flex-direction: row;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
display: flex;
align-items: center;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
Just use margin-left: auto on the element you want shoved to the side. Inside a flex container anything with an auto margin on any side will push it to the farthest opposite side.
.song {
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
margin-left: auto;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
just add margin-left:auto in your add to library div
.song {
display: flex;
flex-direction: row;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
display: flex;
align-items: center;
margin-left: auto;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I have a simple webpage with a .topnav bar and a .container with a few elements in it. I am trying to center just the .container, not .topnav, within the body of the page so that it will be vertically centered. However, when I've tried styling body with:
display:flex;
align-items:center;
justify-content:center;
Both the .topbar and .container are centered. How do I go about centering just the .container vertically?
body,
html {
height: 100%;
}
.contact_box {
text-align: center;
background-color: red;
border: 1px solid #c0c0c0;
border-radius: 5px;
height: 20em;
width: 25em;
box-shadow: 1px 1px 6px #757677;
float: left;
}
.contact_box img {
margin-top: 3.3em;
margin-bottom: 1.2em;
height: 3em;
width: 3em;
}
.contact_box h3 {
color: #6d6d6d;
}
#contact .container {
display: flex;
align-items: center;
justify-content: center;
}
<body id="contact">
<div class="topnav" id="myTopnav">
Home
About
Contact
<a class="icon" onclick="myFunction()">☰</a>
</div>
<div class="container">
<div class="row" id="contact_section">
<div class="contact_box" class="col-md-4">
<img src="resources/github_logo.png" alt="Github">
<br>
<h3>GitHub</h3>
</div>
<div class="contact_box" class="col-md-4">
<img src="resources/linkedin_logo.png" alt="LinkedIn">
<h3>LinkedIn</h3>
</div>
<div class="contact_box" class="col-md-4">
<img src="resources/email_icon.png" alt="EMAIL">
<h3>Email</h3>
</div>
</div>
</div>
</body>
Here's how it looks now:
Hi to align it vertically in the middle of the page, set the height of the container to be 100% of the viewport:
#contact .container {
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
I think I see what you're looking for:
header at the top of the page and body below, with body contents centered vertically.
There are three flex systems in my example below:
The first sets up <body> as a vertical flex container with two items: .topnav and .container. The items are justified to the start of the flex container with justify-content: flex-start (this is the default anyway) and .container is allowed to grow to fill the flex container with flex-grow:1.
The second sets up .container as a vertical flex container with each .row as an item. Items are centered vertically and horizontally with justify-content: center and align-items: center, respectively.
The third sets up .row elements as horizontal flex containers (flex-direction: row is the default), with each .contact_box as an item. Items are centered horizontally with justify-content: center.
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.container {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.row {
display: flex;
flex-direction: row;
justify-content: center;
}
.contact_box {
background-color: red;
border: 1px solid #c0c0c0;
border-radius: .5em;
box-shadow: 1px 1px 6px #757677;
padding: 1em 2em;
text-align: center;
}
.contact_box h3 {
margin: .25em 0 0;
}
<div class="topnav">
Home
About
Contact
<a class="icon">☰</a>
</div>
<div class="container">
<div class="row">
<div class="contact_box">
<img src="resources/github_logo.png" alt="Github">
<br>
<h3>GitHub</h3>
</div>
<div class="contact_box">
<img src="resources/linkedin_logo.png" alt="LinkedIn">
<h3>LinkedIn</h3>
</div>
<div class="contact_box">
<img src="resources/email_icon.png" alt="EMAIL">
<h3>Email</h3>
</div>
</div>
</div>
Like this, with each flex system a different color:
And if you added another .row, it might look like this:
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 5 years ago.
I have this markup
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2 {
display: flex;
flex-direction: row;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
I tried to align the <div>Read Chapter 1 to 3</div> but it won't align to center when I use text-align: center; I tried on the that div and on its parent div.
I removed text-align from my code as it was not working that's why you don't see it.
Use justify-content: center to .course-flex-row-2
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2 {
display: flex;
flex-direction: row;
justify-content: center;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
any of the DIVs that you would like to center the content of add
margin: auto;
to the CSS. You can also adjust the top and bottom margin by using
margin: 10px auto; //center with 10px top margin.
or
margin: 10px 10px auto; //center with 10px margin at top and bottom.
however....
text-align: center;
would center text only, not elements inside the div.
Change Like this :
First change className to class.
After Change Like This:
.course-flex-row-2{
display: flex;<-----------------Remove
flex-direction: row;
text-align: center;
}
.course-flex-row-2 div {<--------------Add
display: inline-block;
}
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2{
flex-direction: row;
text-align: center;
}
.course-flex-row-2 div{
display: inline-block;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
I usually go with position absolute along with transform for inner div & position relative for outer div.
Check the same example in jsfiddle https://jsfiddle.net/f2vvy6st/
.course-flex-row-2 {
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
div {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top:50%;
}
}
put align attribute to the parent div, it should also work, (not recommended but will get you work)
<div className="course-flex-container" align="center">
I am using flexbox to center content with justify-content: center which works as intended but flexbox also moves divs to be side by side which I don't want.
Here is an example
.flex {
display: flex;
justify-content: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
How can I use flexbox while retaining the default one div on top of the other positioning.
You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.content {
width: 100px;
height 100px;
color: #000;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="flex">
<div class="content"></div>
<div class="content"></div>
</div>
Try following code,
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>