How can I align center an icon and text (below icon), so that they stay at the same position inside a rectangular div when it's getting resized? Here is the example of what I meant. Example
.card{
width: 300px;
height: 400px;
border: 1px solid skyblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.circle{
width: 30px;
height: 30px;
border-radius: 100%;
background: green;
}
<div class="card">
<span class="circle"></span>
</div>
Try to use display: flex
Related
So basically I am trying to make all my div boxes one size but a unique color. I currently have just done it in CSS below. However I know this isn't efficient, calling out each box with a specific class and changing the color. Is there a better way in CSS?
<div class='containera'>
<div class='box1a'>#c37857</div>
<div class='box2a'>#eeedbe</div>
<div class='box3a'>#99b27f</div>
</div>
.containera{
display: flex;
height: 250px;
width: 800px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-shrink: 1;
background-color: #734444;
border-radius: 35px;
}
.box1a,.box2a,.box3a{
height: 100px;
width: 200px;
margin: -50px 5px 5px 5px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box1a{
background-color: #c37857;
}
.box2a{
background-color: #eeedbe;
}
.box3a{
background-color: #99b27f;
}
Create a new class then add that class name onto the element you want.
.containera{
display: flex;
height: 250px;
width: 800px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-shrink: 1;
background-color: #734444;
border-radius: 35px;
}
.box-size{
height: 100px;
width: 200px;
margin: -50px 5px 5px 5px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box1a{
background-color: #c37857;
}
.box2a{
background-color: #eeedbe;
}
.box3a{
background-color: #99b27f;
}
<div class='containera'>
<div class='box-size box1a'>#c37857</div>
<div class='box-size box2a'>#eeedbe</div>
<div class='box-size box3a'>#99b27f</div>
</div>
You can give div a comprehensive style using * and set separate classes for each box with your favorite colors
you can write inline css... you should use !important to make sure that inline css overwrites class
<div class='containera'>
<div class='box-size box1a' style="background-color:red !important;">#c37857</div>
<div class='box-size box2a'>#eeedbe</div>
<div class='box-size box3a'>#99b27f</div>
</div>
This question already has answers here:
Border radius circle
(6 answers)
how to put img inside circle in html and css?
(4 answers)
Closed 12 months ago.
Need to draw circle onto which I place image icon like this by applying CSS as shown in image below. Tried the code but unable to accomplish it. Please help.
Required:
HTML:
.dot {
height: 505px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>
i have create as you want. please check. if this helpful please hit the green check. thanks
.dot {
height: 200px;
width: 200px;
background-color: #fff;
border-radius: 50%;
border: 5px solid grey;
display: inline-block;
text-align:center;
}
.dot h3 {
font-size: 23px;
margin:0;
}
.dot-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
.dot2 {
display: table;
}
.dot-box2 {
display: table-cell;
vertical-align: middle;
}
<h2>
Circle With Flex
</h2>
<div class="dot">
<div class="dot-box">
<img src="https://i.ibb.co/QcHsj9z/user.jpg">
<h3>
MEMBER FEATURE
</h3>
</div>
</div>
<br>
<h2>
Circle With Table
</h2>
<div class="dot dot2">
<div class="dot-box2">
<img src="https://i.ibb.co/QcHsj9z/user.jpg">
<h3>
MEMBER FEATURE
</h3>
</div>
</div>
Make the width and height the same
.dot {
height: 50px;
width: 50px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>
For A Circle, Height and Width should be same.
.dot {
height: 200px;
width: 200px;
background-color: #bbb;
border-radius: 50%;
// Below Code is For Placing content in the Center of Circle
display: flex;
flex-direction:column;
justify-content: center;
align-items:center;
}
<div class="dot">
<div class="content">
<h1>Round Dots / Circles</h1>
</div>
</div>
Height should be same as width.
.dot {
height: 505px;
width: 505px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>
Here is the code pen link:
https://codepen.io/wahabshah/pen/YzELexr
.dot {
height: 200px;
width: 200px;
background-color: #bbb;
border-radius: 50%;
border: 5px solid grey;
display: inline-block;
}
Also for inside content use display : flex and use column for displaying them vertically.
Height and width must be equal to form a circle and border-radius of 50%
I have two buttons that I want side by side with a little space between them:
I originally did this by using display: flex; and justify-content: space-between;.
But, I want the block that wraps the two buttons to be horizontally and vertically centered on a full page. Therefore, I wrapped everything in a parent div and applied display: flex; justify-content: center; align-items: center to the parent div. However, this results in the spacing of the buttons being reset.
How do I get the overall block to be horizontally and vertically centered on the page while also keeping the spacing of the buttons?
The code is here and here is a Fiddle.
HTML
<div class="form-wrap">
<div class="button-wrap">
<button class="button">
Button 1
</button>
<button class="button">
Button 2
</button>
</div>
</div>
CSS
.form-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid gray;
max-width: 100vw;
width: 100vw;
max-height: 100vh;
height: 100vh;
}
.button-wrap {
display: flex;
justify-content: space-between;
max-width: 200px;
}
.button {
padding: 20px;
border: 1px solid gray;
cursor: pointer;
}
.button:hover {
background: lightyellow;
}
You can simply add a margin to your button elements.
.form-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid gray;
max-width: 100vw;
width: 100vw;
max-height: 100vh;
height: 100vh;
}
.button-wrap {
display: flex;
justify-content: space-around;
max-width: 200px;
}
.button {
padding: 20px;
border: 1px solid gray;
cursor: pointer;
margin:0 15px;
}
.button:hover {
background: lightyellow;
}
<div class="form-wrap">
<div class="button-wrap">
<button class="button">
Button 1
</button>
<button class="button">
Button 2
</button>
</div>
</div>
Solution #2: Or you can set a width to your button-wrap element that is larger than the total width of the 2 buttons, then you will have a space between the 2 buttons, like below snippet:
.form-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid gray;
max-width: 100vw;
width: 100vw;
max-height: 100vh;
height: 100vh;
}
.button-wrap {
display: flex;
justify-content: space-around;
width:250px;max-width: 250px;
}
.button {
padding: 20px;
border: 1px solid gray;
cursor: pointer;
}
.button:hover {
background: lightyellow;
}
<div class="form-wrap">
<div class="button-wrap">
<button class="button">
Button 1
</button>
<button class="button">
Button 2
</button>
</div>
</div>
I am using this to center things in CSS:
.testclass {
display: flex;
justify-content: center;
}
but when i want to scale elements using width and height, it doesn't work and my elements are not centered.
Like this:
.testclass {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
}
What's the problem?
This looks like the expected behavior.
Remember that in this case justify-content: center; centers what is inside the container - not the container itself.
EDIT:
I added margin: 0 auto; to center the container.
#container1 {
display: flex;
justify-content: center;
border: 1px solid red;
}
#container1 > div {
border: 1px solid blue;
background: yellow;
}
#container2 {
display: flex;
justify-content: center;
border: 1px solid red;
width: 200px;
height: 200px;
margin: 0 auto;
}
#container2 > div {
border: 1px solid blue;
background: yellow;
}
<div id="container1">
<div>test 1</div>
</div>
<div id="container2">
<div>test 2</div>
</div>
display: flex; and justify-content: center;
works for parent elements. That is, child elements of that particular parent will be centered, not the parent.
To center .testclassHTML
<div class="parent">
<div class="testclass"></div>
</div>
CSS
.parent {
background-color: red;
display: flex;
justify-content: center;
}
.testclass {
background-color: green;
width: 200px;
height: 200px;
}
If you want full center (horizontal vertical) you can use this code:
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="testclass">Content</div>
</div>
I have a design below which I am trying to replicate in HTML/CSS:
The above design has 2 boxes with text "Icon" at the center of each.
At this moment, I am able to get this in fiddle with text "icon" not at the center of a box.
The HTML and CSS codes which I have used to get that box and the text "icon" are:
HTML code:
<div class="squares">
<div class="icon1">
<p>Icon</p>
</div>
<div class="icon2">
<p>Icon</p>
</div>
</div>
CSS code:
.icon1,
.icon2 {
width: 200px;
height: 200px;
display: inline-block;
background: #F5F8FA;
}
.icon1 {
margin-right: 10%;
border-style: ridge;
}
.icon2 {
margin-left: 10%;
border-style: ridge;
}
I think I have to put display: flex; align-items: center; justify-content: center; to make icon text come at the center of a box but unfortunately its not working for some reasons:
.icon1 {
margin-right: 10%;
border-style: ridge;
display: flex;
align-items: center;
justify-content: center;
}
.icon2 {
margin-left: 10%;
border-style: ridge;
display: flex;
align-items: center;
justify-content: center;
}
You have a contradiction in there: You set display to inline-block for both, then in the following rules you set it to flex, which overwrites the inline-block setting, so the squares won't be displayed next ot each other.
Apply display: flex to the parent (.squares) and erase the inline-block setting:
.squares {
display: flex;
justify-content: center;
}
.icon1,
.icon2 {
width: 200px;
height: 200px;
background: #F5F8FA;
}
.icon1 {
margin-right: 10%;
border-style: ridge;
display: flex;
align-items: center;
justify-content: center;
}
.icon2 {
border-style: ridge;
display: flex;
align-items: center;
justify-content: center;
}
<div class="squares">
<div class="icon1">
<p>Icon</p>
</div>
<div class="icon2">
<p>Icon</p>
</div>
</div>
you can use flex property on parent div like this, you'll get the desired outcome
.squares {
display: flex;
justify-content: center;
}
You can try
text-align: center; /* horizontal align */
display: table-cell; /*display as table cell to make possible vertical align */
vertical-align: middle;
Because you know height probably easy to make one more div inside with padding-top: 80px for example