This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I am centering a number inside of a circle. I am trying to center that number in a "card"
.numberCircle {
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#inner {
width: 50%;
margin: 0 auto;
}
<div class="card">
<div id="#(ViewBag.Id)" class="card-body" style="min-height: 495px;">
<div style="text-align:center">
<h2>My Number</h2>
</div>
<div id="inner">
<div class="numberCircle" style="background:green;font-size:32px">2.98</div>
</div>
</div>
</div>
The heading centers but the number does not:
Just add margin: 0 auto; to .numberCircle. That will center it inside the inner div.
.numberCircle {
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
#inner {
width: 50%;
margin: 0 auto;
}
<div class="card">
<div id="#(ViewBag.Id)" class="card-body" style="min-height: 495px;">
<div style="text-align:center">
<h2>My Number</h2>
</div>
<div id="inner">
<div class="numberCircle" style="background:green;font-size:32px">2.98</div>
</div>
</div>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
.colum {
display: flex;
align-content: center;
}
.item {
width: 300px;
height: 300px;
background-color: white;
}
<div id="flexn">
<div class="colum cl1">
<div class="item a1">
</div>
<div class="item a2">
</div>
<div class="item a3">
</div>
</div>
<div class="colum cl2">
<div class="item b1">
</div>
<div class="item b2">
</div>
<div class="item b3">
</div>
</div>
</div>
I want the content from from both cl1 and cl2 to have different flexes that put the items in the middle, i tried doing this this way but it didn't work, why?
in case to put them in the middle in x-direction you have to use justify-content: center; and if u want to center them in y-direction u also need align-items: center; but this would only work if u have a height on your colum div.
.colum {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
width: 300px;
height: 300px;
background-color: white;
}
this is how it has to look like if u want to put them in the middle of the page.
And if u want to see the results u have to change the background color to any other color so u can see it . And maybe if u put some margin so u can put the items away from each other which makes it more clear. Like this one:
.colum {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
width: 300px;
height: 300px;
background-color: rgb(194, 55, 55);
margin: 20px;
}
Should be align items not content.
.colum {
display: flex;
align-items: center;
}
Try with this:
.colum {
display: flex;
justify-content: center;
}
.item {
width: 300px;
height: 300px;
background-color: white;
box-shadow: 0 0 4px #ccc;
text-align: center;
}
<div id="flexn">
<div class="colum cl1">
<div class="item a1">rr
</div>
<div class="item a2">rr
</div>
<div class="item a3">rr
</div>
</div>
<div class="colum cl2">
<div class="item b1">rr
</div>
<div class="item b2">rr
</div>
<div class="item b3">rr
</div>
</div>
</div>
This question already has answers here:
Why does the outer <div> here not completely surround the inner <div>?
(2 answers)
Closed 2 years ago.
I have a scrollable area inside which there are a div and a collection of smaller divs.
The yellow container takes the width of the visible viewport of the scrollable area.
How do I make it "wrap" the whole set of pink rectangles automatically like how it happens in a regular non-overflow div?
https://codepen.io/sergeibasharov/pen/mdEdKWO
<div class="scroll-area">
<div class="header">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
</div>
.scroll-area{
background: gray;
width: 500px;
height: 400px;
overflow: auto
}
.header{
background: yellow;
display: flex;
padding: 20px;
}
.cell{
width: 100px;
min-width: 100px;
padding: 8px 0;
margin: 2px;
text-align: center;
background: pink;
}
To wrap children of an element with display: flex, use flex-wrap: wrap.
.scroll-area{
background: gray;
width: 500px;
height: 400px;
overflow: auto
}
.header{
background: yellow;
display: flex;
padding: 20px;
flex-wrap: wrap;
}
.cell{
width: 100px;
min-width: 100px;
padding: 8px 0;
margin: 2px;
text-align: center;
background: pink;
}
<div class="scroll-area">
<div class="header">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I'd like to have a horizontally and vertically centered cards. I've done it like this.
*{
margin: 0;
padding: 0;
}
.wrapper{
background-color: darkkhaki;
width: 700px;
height: 700px;
}
.cards{
display: flex;
justify-content: center;
align-items: center;
}
.card{
width: 100px;
height: 250px;
background-color: chartreuse;
border: crimson 2px solid;
}
<div class="wrapper">
<div class="text">
<p>Lorem ipsum</p>
</div>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
However, the vertical center doesn't occur (just the horizontal).
The same happens when I try it with the "text" class.
Thank you for your help :)
In order to center align content, you need at least 1 defined height so the container knows where the "center" is. With flexbox it's as easy then setting justify-content: center and align-items: center to make sure any flex item goes to the center of the container.
What you are missing in your code, is a height for the cards container. You could set a number for it, or just heigth: 100% so it takes the full height of its own container (wrapper) which is 700px
body {
margin: 0
}
.flex-item {
border: 1px solid black;
height: 100px;
width: 150px
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div class="flex-container">
<div class="flex-item"></div>
</div>
Here's your code
* {
margin: 0;
padding: 0;
}
.wrapper {
background-color: darkkhaki;
width: 700px;
height: 700px;
}
.cards {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.card {
width: 100px;
height: 250px;
background-color: chartreuse;
border: crimson 2px solid;
}
<div class="wrapper">
<div class="text">
<p>Lorem ipsum</p>
</div>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Simple, set margin: 0 auto; on the main container that holds everything together. In your case, that appears be the main <div> with the wrapper class:
.wrapper {
background-color: darkkhaki;
width: 700px;
height: 700px;
margin: 0 auto;
}
That should do the trick.
Simply add the total height (100% or 100h) to the cards class.
.cards{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
.top-row{
min-height: 50vh;
min-width: 100vw;
padding:0px;
}
.top-col{
background: #CCCCCC;
align-content: center;
min-height: 50vh;
min-width: 100vw;
}
.bottom-col{
background: #CCCCCC;
align-content: center;
min-height: 50vh;
min-width: 100vw;
}
.bottom-row{
min-height: 50vh;
min-width: 100vw;
padding:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row top-row">
<div class="col-12 top-col">
<h2>Hello</h2>
</div>
</div>
<div class ="row bottom-row">
<div class="col-12 bottom-col">
<h2>World</h2>
</div>
</div>
</div>
</body>
</html>
I want to be able to center content vertically from just editing the css portion.
I have done lots of research and tried many different this but I was not able to get a solution that works.
If I understand your question, you want to align the text vertically, so for that just add text-align: center; to your two row class
.top-row{
min-height: 50vh;
min-width: 100vw;
padding:0px;
text-align:center;
}
.top-col{
background: #CCCCCC;
align-content: center;
min-height: 50vh;
min-width: 100vw;
}
.bottom-col{
background: #CCCCCC;
align-content: center;
min-height: 50vh;
min-width: 100vw;
}
.bottom-row{
min-height: 50vh;
min-width: 100vw;
padding:0px;
text-align:center;
}
<div class="container">
<div class="row top-row">
<div class="col-12 top-col">
<h2>Hello</h2>
</div>
</div>
<div class ="row bottom-row">
<div class="col-12 bottom-col">
<h2>World</h2>
</div>
</div>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
I have some problems with aligning text to the center:
.list {
width: 100%;
height: 100%;
}
.row {
vertical-align: middle;
width: 100%;
height: 30px;
text-align: center;
}
.name {
display: block;
float: left;
width: 30%;
}
.message {
display: block;
float: left;
width: 70%;
}
<div class="list">
<div class="row">
<div class="name">Ben</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">Tom</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">NoName</div>
<div class="message">Hello world</div>
</div>
What I would like to achieve is to get list of names and messages, where each name and message are in one row. But currently, where I am trying to align text in row it doesn't work. Any ideas?
You can do this with display:flex:
.list {
width: 100%;
height: 100%;
}
.row {
display: flex;
justify-content: center;
align-items: center;
text-align:center;
width: 100%;
height: 30px;
}
.name {
display: block;
float: left;
width: 30%;
}
.message {
display: block;
float: left;
width: 70%;
}
<div class="list">
<div class="row">
<div class="name">Ben</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">Tom</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">NoName</div>
<div class="message">Hello world</div>
</div>