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>
Related
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>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I have tried to center my divs like described on this website but something is wrong and I don't get it. Maybe you know what the problem is, because I can't find a proper solution to center the divs in the exact middle. I have added just one css input description because the others are the same.
.registerBox {
position: relative;
height: 80%;
justify-content: center;
align-items: center;
}
.center {
position: relative;
height: auto;
justify-content: center;
align-items: center;
}
.centergui {
justify-content: center;
align-items: center;
}
//text styles
.h1 {
margin: auto;
justify-self: center;
text-align: center;
}
input[id="usernametext"] {
z-index: 2;
border-radius: $textinputradius;
background-color: $textinputbackground;
font-size: $textinputfontsize;
#include respond-to(medium-devices) {width: 125px;}
#include respond-to(wide-screens) {float: none;}
}
input[id="usernametext"],input[type="password"],input[id="emailtext"],input[id="phonenumbertext"], textarea, select {
outline: #272727;
border: none;
color: #ececec;
}
<div className={"h1"}> <h1>Register</h1> </div>
<div className={"flexCenter"}>
<div className={"registerBox"}>
<div className={"center"}><input type={"text"} id={"usernametext"} placeholder={"Username"}/></div>
<div className={"center"}><input type={"text"} id={"emailtext"} placeholder={"Email-Address"}/></div>
<div className={"center"}><input type={"password"} id={"passwordtext"} placeholder={"Password"}/></div>
<div className={"center"}><input type={"text"} id={"phonenumbertext"} placeholder={"Phonenumber(optional)"}/></div>
</div>
I want to offer two options - flex and table. Wrap in two parent divs (an additional parent div is needed so that the top label is left-aligned and centered at the same time), and add flex rules to the topmost parent div. Did you need it?
flex:
.center_flex {
display: flex;
justify-content: center;
}
.registerBox {
position: relative;
height: 80%;
justify-content: center;
align-items: center;
}
.center {
position: relative;
height: auto;
justify-content: center;
align-items: center;
}
.centergui {
justify-content: center;
align-items: center;
}
//text styles
.h1 {
margin: auto;
justify-self: center;
text-align: center;
}
input[id="usernametext"] {
z-index: 2;
border-radius: $textinputradius;
background-color: $textinputbackground;
font-size: $textinputfontsize;
#include respond-to(medium-devices) {width: 125px;}
#include respond-to(wide-screens) {float: none;}
}
input[id="usernametext"],input[type="password"],input[id="emailtext"],input[id="phonenumbertext"], textarea, select {
outline: #272727;
border: none;
color: #ececec;
}
<div class="center_flex">
<div class="center_flex_container">
<div className={"h1"}> <h1>Register</h1> </div>
<div className={"flexCenter"}>
<div className={"registerBox"}>
<div className={"center"}><input type={"text"} id={"usernametext"} placeholder={"Username"}/></div>
<div className={"center"}><input type={"text"} id={"emailtext"} placeholder={"Email-Address"}/></div>
<div className={"center"}><input type={"password"} id={"passwordtext"} placeholder={"Password"}/></div>
<div className={"center"}><input type={"text"} id={"phonenumbertext"} placeholder={"Phonenumber(optional)"}/></div>
</div>
</div>
</div>
For a table, it is enough to wrap it in only one parental div, setting the margin rules:
.center_table {
display: table;
margin-left: auto;
margin-right: auto;
}
.registerBox {
position: relative;
height: 80%;
justify-content: center;
align-items: center;
}
.center {
position: relative;
height: auto;
justify-content: center;
align-items: center;
}
.centergui {
justify-content: center;
align-items: center;
}
//text styles
.h1 {
margin: auto;
justify-self: center;
text-align: center;
}
input[id="usernametext"] {
z-index: 2;
border-radius: $textinputradius;
background-color: $textinputbackground;
font-size: $textinputfontsize;
#include respond-to(medium-devices) {width: 125px;}
#include respond-to(wide-screens) {float: none;}
}
input[id="usernametext"],input[type="password"],input[id="emailtext"],input[id="phonenumbertext"], textarea, select {
outline: #272727;
border: none;
color: #ececec;
}
<div class="center_table">
<div className={"h1"}> <h1>Register</h1> </div>
<div className={"flexCenter"}>
<div className={"registerBox"}>
<div className={"center"}><input type={"text"} id={"usernametext"} placeholder={"Username"}/></div>
<div className={"center"}><input type={"text"} id={"emailtext"} placeholder={"Email-Address"}/></div>
<div className={"center"}><input type={"password"} id={"passwordtext"} placeholder={"Password"}/></div>
<div className={"center"}><input type={"text"} id={"phonenumbertext"} placeholder={"Phonenumber(optional)"}/></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>
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>
i managed to have vertically aligned column content with flexbox.
However, I need to have headers for the columns as well.
How can i have headers, in which the text is centered to the width of the column and which are at the top of the columns (the content must remain centered vertically)
see my codepen try:
http://codepen.io/anon/pen/QNmrNx
.tothetop{
position: absolute;
top:0;
text-align:center;
background: yellow;
}
put the headers on top, but the width does not match the column width so I can't center the text
If I understand you correctly, you want header text to be center horizontally in respect to columns. This may help you -
header {
display: flex;
justify-content: center;
width: 500px;
margin: auto;
}
.myView {
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
height: 500px;
width: 500px;
}
.wpType {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
.wpType:nth-child(even){
background: blue;
}
.wpType:nth-child(odd){
background: red;
}
.wp{
flex: 0 1 auto;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
background: white;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<header>header</header>
<div class="myView">
<div class="wpType">
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType"><div class="wp"></div>
<div class="wp"></div></div>
<div class="wpType"><div class="wp"></div></div>
</div>