I have two divs div-a and div-b wrapped by another div div-a-b-wrapper.
div-a-b-wrapper is repeatable, so all div-a-b-wrapper are wrapped with another parent div, div-c.
I want to vertically center all div-a-b-wrappers inside div-c. This is the layout I want to achieve:
This is my HTML,
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
</div>
And this is the CSS I have for it so far,
.div-c {
width: 100%;
height: 100px;
border: 1px solid #333;
}
.div-a-b-wrapper {
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
height: 100%;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
But with this the .div-a-b-wrapper is aligned to the top of div-c.
How do I center .div-a-b-wrapper in div-c?
Here is a fiddle: https://jsfiddle.net/6kfzLtx3/1/
Updated based on a comment
You could do that using flexbox
.div-c {
height: 100px;
border: 1px solid #333;
display: flex; /* added property */
align-items: center; /* added property, will center its children vertical */
overflow: hidden /* added property, will cut of overflowed elements */
}
.div-a-b-wrapper {
min-width: 100px; /* changed property, keep them at min. 100px */
margin: 0 5px;
border: 1px dotted red;
/* height: 100%; */ /* removed this or else they always take 100% height */
}
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
Try this css:
.div-c {
position: relative;
width: 100%;
height: 100px;
border: 1px solid #333;
}
.div-a-b-wrapper {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
border: 1px dotted red;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
This might be a solution to look into. Highly recommend flexbox.
.div-c {
width: 100%; height: 100px; border: 1px solid #333; display: flex; flex-direction: row; justify-content: space-around;
}
.div-a-b-wrapper {
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
height: 100%;
border: 1px dotted red;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
Use Flex-box
Apply the following styles to div-c
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
Then apply
display: flex;
flex-direction: column;
to div-a-b-wrapper
.div-c {
border: 1px solid #333;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100px;
border: 1px solid #333;
padding: 20px;
box-sizing:border-box;
}
.div-a-b-wrapper {
margin-left: 10px;
margin-right: 10px;
height: 100%;
display: flex;
flex-direction: column;
width: 100px;
}
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">b</div>
</div>
</div>
.div-c {
width: 100%;
height: 100px;
border: 1px solid #333;
padding:20px;
display: flex;
align-items: center;
}
.div-a-b-wrapper {
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
height: 100%;
border: 1px dotted red;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
Try this:
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
try this may be this will help you.
.div-c {
width: 100%;
height: 100px;
border: 1px solid #333;
text-align: center;
vertical-align: middle;
display: table-cell;
vertical-align: middle;
}
.div-a-b-wrapper {
width: 100px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
border: 1px dotted red;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
background-color: blue;
width: 100%;
}
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
You can use 3 different panels inside a container.
You can use the following code:
#content{
float: fixed;
height: 100%;
margin-left: 20%;
margin-right: 20%;
display: block;
padding-bottom: 0;
margin-bottom: 0;
width: 60%;
}
#navbar{
float: left;
height: 100%;
text-align: justify;
width: 20%;
display:block;
margin-right: 80%;
}
#rightpanel{
float: right;
margin-left: 80%;
height: 100%;
width: 20%;
text-align: justify;
display: block;
}
#container{
position: absolute;
float:none;
overflow: hidden;
height: 100%;
width: auto;
left: 0%;
right: 0%;
top: 0;
bottom: 0;
margin: 0;
}
After including this in the project, you can use the following code syntax to vertically align the content div in the center:
<body>
<div class="container">
<div class = "navbar">
left column content goes here.....
</div>
<div class="content">
content goes here....
</div>
<div class="rightpanel">
right panel...
</div>
</div>
</body>
Try this: https://jsfiddle.net/k2e8dzmo/
<div class="div-c">
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
<div class="div-a-b-wrapper">
<div class="div-a">a</div>
<div class="div-b">a</div>
</div>
</div>
css
.div-c {
width: 100%;
height: 125px;
border: 1px solid #333;
display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
.div-a-b-wrapper {
width: 100px;
text-align:center;
margin-left: 10px;
margin-right: 10px;
}
.div-a {
background-color: red;
width: 100%;
}
.div-b {
margin-top:5px;
background-color: blue;
width: 100%;
height:75px;
}
Maybe put a center inside div-c like:
<div-c>
<center>
<divs></div>
</center>
</div-c>
Related
I have two queries in a single program.
query1:
I am trying to align two sub super sub divisions horizontally inside a sub div of a container div. Below is my code, could you please help me out with this. I have attached the desirable output.
query2:
and from the code you can see inside a circle there is a paragraph day, I wanted it to start from the center of the circle such as if the number of days is 1 it should be shown from the center and when there are 3 digit days it should be adjusted in the center. Hope you understand my queries.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
}
.container-meta {
position: relative;
}
.container-meta .left {
float: left;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
current output:
expected output:
You can do this by giving display:flex; to the left class and by giving some margin to one of divs.
.circle {
height: max-content;
width: max-content;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
}
.container-meta {
position: relative;
}
.container-meta .left {
float: left;
display: flex;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
width:max-content;
}
.date {
margin-left: 5px;
}
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
Solution1.
I add display: flex at the .leftand margin-right: 10px at .circle.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
margin-right: 10px;
}
.container-meta {
position: relative;
}
.container-meta .left {
display: flex;
float: left;
}
.container-meta .right {
float: right;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<body>
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
</body>
Solution2.
Using flex instead of float.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5%;
text-align: center;
border-color: black;
border-style: solid;
margin-right: 10px;
}
.container-meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.container-meta .left {
display: flex;
align-items: center;
flex-grow: 1;
}
.right p,
.left p {
padding: 0;
margin: 0;
}
<body>
<div class="container-meta">
<div class="left">
<div class="circle">
<p>days</p>
<p>hours</p>
</div>
<div class="date">
<p>today-date</p>
<p>tomorrow-date</p>
</div>
</div>
<div class="right">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
</body>
I'm trying to align div horizontally as the browser resizes, currently, I have 3 divs. As per the requirement, I can add an additional div. My problem is as soon I increase the window size above 2500, the right side of the screen becomes empty & all the divs are floating to left. As I cannot set the div width to 30-33% as per the requirement. Below is my code. kindly help.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
float: left;
display: flex;
width: 100%
}
div.box {
float: left;
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 30%;
border: 1px solid #cccccc;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
As #Arman Ebrahimi had already mentioned correctly. Use flex box only. The issue of responsibility can be handled well with media queries.
Working example
* {
box-sizing: border-box;
}
div.box-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
gap: 10px;
width: 80%;
margin: 0 auto;
/* or use justify-content: center; */
}
.box {
background-color: #f1f1f1;
padding: 10px;
flex: 30%;
border: 1px solid #cccccc;
word-break: break-word;
height: 326px;
}
#media (max-width: 800px) {
.box {
flex: 100%;
}
}
<div class="box-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
Remove float and only use flex:
* {
box-sizing: border-box;
}
body,
html {
margin: auto;
}
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
}
div.box {
background-color: #ffffff;
padding: 10px;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: calc(100vw / 3);
/*calc(100vw / number of div)*/
border: 1px solid #cccccc;
word-break: break-word;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Use justify-content: center; when you are using flex. This means the flexed contents will always be centered on all screen types.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 33.33%;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Edit ~ add another div, reduce the % the div covers. Demonstrate min-width responsiveness.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 24%;
min-width: 300px;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
I got pretty close to what I want however I think the 32vh is what's ruining my size.
When I use img {height: 100%;} they become too big so I settled down for 32vh; However the left and right div are a few pixels off. It's especially noticeable if you zoom in a little (press ctrl+'+'). It happens on both firefox and chrome. I tried using 50% and 100% height on the images and putting position relative on testB but it didn't seem to help. How do I make both size equal height? I don't mind if there's extra pixels between the right two divs but they must be same height as left aka div a
body * {
box-sizing: border-box;
color: white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
text-align: center;
}
.testA {
background-color: black;
width: 61.5%;
display: inline-block;
padding-right: 18px;
line-height: 65vh;
}
.testB {
background-color: green;
flex-grow: 1;
line-height: 32vh;
position: relative;
}
.testC {
background-color: royalblue;
vertical-align: top;
margin-bottom: 10px;
}
.testD {
flex-grow: 1;
background-color: purple;
vertical-align: bottom;
margin-top: 10px;
}
.test img {
vertical-align: middle;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32vh;
}
.testD img {
vertical-align: bottom;
height: 32vh;
}
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/300x500">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/300x500">
</div>
<div class="testD">
<img src="https://placehold.it/300x500">
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/500x300">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/500x300">
</div>
<div class="testD">
<img src="https://placehold.it/500x300">
</div>
</div>
</div>
I hope this is what u r expecting:
<style>
body * {
box-sizing: border-box;
color: white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
}
.testA {
background-color: black;
width: 61.5%;
display: inline-block;
padding-right: 18px;
line-height: 65vh;
text-align: center;
}
.testB {
background-color: green;
flex-grow: 1;
display: flex;
flex-direction: column;
line-height: 32vh;
text-align: right;
position: relative;
}
.testC {
display: flex;
align-items: center;
justify-content: center;
background-color: royalblue;
vertical-align: top;
}
.testD {
display: flex;
align-items: center;
justify-content: center;
background-color: purple;
flex-grow: 1;
vertical-align: bottom;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32.5vh;
}
.testD img {
vertical-align: bottom;
height: 32.5vh;
}
</style>
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/300x500">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/300x500">
</div>
<div class="testD">
<img src="https://placehold.it/300x500">
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/500x300">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/500x300">
</div>
<div class="testD">
<img src="https://placehold.it/500x300">
</div>
</div>
</div>
not quit sure if I understand your question, but here is my approach.
Use "background-image" instead and then background-size: cover;
<style>
body * {
box-sizing: border-box;
color:white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
}
.testA {
background-image: url(https://placehold.it/500x300);
width: 61.5%;
}
.testB {
background-color: green;
flex-grow:1;
line-height: 32vh;
text-align: right;
position: relative;
}
.testC {
background-image: url(https://placehold.it/500x300);
margin-bottom: 6 px;
background-size: cover;
}
.testD {
background-image: url(https://placehold.it/500x300);
margin-bottom: 10px;
background-size: cover;
}
.test img {
vertical-align: middle;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32vh;
}
.testD img {
vertical-align: bottom;
height: 32vh;
}
</style>
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
I'm trying to center two buttons within the center of their parent element. The problem is that the first element has content in the beginning and end, which causes flex to center to that, messing up the alignment of the whole.
#container {
background-color: green;
width: 100%;
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>
Add a display: flex property on #container
#container {
background-color: green;
width: 100%;
display:flex
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>
You need justify-content: center; along with display:flex; on parent div.
#container {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
display: flex;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>
I don't know how much this code will be help you. Just try to give it more better view so that you can control the alignment properly along with button height and width. Just hope it helps you.
#container {
background-color: green;
width: 100%;
display: flex;
}
#d1 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px
}
#d2 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px text-align:center;
}
#d3 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px
}
#d2>input {
background-color: blue;
width: 100%;
vertical-align: middle;
}
#d3>input {
background-color: red;
vertical-align: middle;
width: 100%;
padding: 0 10px 0 10px
}
<div id="container">
<div id="d1">
<p>This is some text</p>
</div>
<div id="d2"><input type="button"></div>
<div id="d3">
<input type="button">
</div>
</div>
I am trying to display multiple circles on the same horizontal axis but with different width and height. The problem is that the circles are shrinked.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/cxuxgy0u/
You should not use the table layout for this. Your HTML does not semantically represent a table, so table element is worng to use.
What you want to do can be achieved with Flexbox.
article {
display: flex;
align-items: center;
}
article > div + div {
margin-left: 1rem;
}
article > div {
flex-shrink: 0;
height: 4rem;
width: 4rem;
border-radius: 50%;
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}
article > div:nth-child(2) {
height: 6rem;
width: 6rem;
}
<article>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
</article>
You might want to read more about Flexbox on MDN.
A simple flexbox solution. Just be sure to set flex-shrink to 0, because the initial value is 1, which allows flex items to shrink when necessary to prevent overflowing the container.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: flex;
align-items: center;
}
.circle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 0 100px; /* flex-shrink: 0, to disable shrinking default */
height: 100px;
border-radius: 50%;
margin: 20px;
border: 1px solid #000;
}
.big-circle {
flex-basis: 300px;
height: 300px;
}
<div class="circles-container">
<div class="circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
https://jsfiddle.net/cxuxgy0u/7/
Try this:
HTML
<div class="container">
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
</div>
CSS
.container {
display:flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.circle {
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle:nth-child(odd) { width: 100px; height: 100px; }
.circle:nth-child(even) { width: 200px; height: 200px; }
Uses flexbox and is the simplest way to achieve what you want.
Here's a fiddle https://jsfiddle.net/itsag/sk3tdo4L/
Hope it helps!
I think your problem is found in the styling.
For each circle, you need to remove the style
display:table-cell
vertical-align: middle;
and then u need to bring in line-height. The line-height should be equal to the height of the circle, for for the smaller circle, you will have
line-height:100px //this brings the text to the middle of the circle vertically.
Then also, you need to increase the border-radius from 50% to 100%
border-radius:100%;
Therefore, your css will not look like this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 100%;
text-align: center;
line-height:100px;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
line-height:300px;
}
This should help you.
Flexbox:
container {
display: flex;
justify-content: center;
}
If you want space between the pictures, use:
margin-left:
or
margin-right:
try this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: flex;
}
.circle {
padding: 40px 30px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell {
}
.big-circle {
padding: 150px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>