Given the follow html and css, how to make the nested box like the
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
<div class='parent'></div>
draw them using background:
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background:
/* color position / width height*/
linear-gradient(red 0 0) left 20px top 20px/50px 50px,
linear-gradient(green 0 0) right 30px top 20px/50px 50px,
linear-gradient(blue 0 0) left 40px bottom 40px/50px 50px;
background-repeat:no-repeat;
}
<div class='parent'></div>
You can use the before or after pseudo element in CSS to achieve what you're looking for without altering the HTML at all. Take a look:
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.parent::before {
content: "";
width: 100px;
height: 100px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
<div class='parent'></div>
Related
I wanted to put a large character to center alignment in both vertical and horizontal. here are my styles and result
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
margin: 150px auto;
text-align: center;
line-height: 300px;
}
span {
display: inline-block;
background-color: burlywood;
line-height: 0.5;
vertical-align: middle;
font-size: 300px;
}
<div><span>s</span></div>
here is the result
How can I put the 's' in the middle?
It looks like the css difference is with lower case letters:
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
background-color: burlywood;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 50%;
height: 50%;
font-size: 10em;
}
<div><span>S</span></div>
<div><span>s</span></div>
<div><span>M</span></div>
<div><span>m</span></div>
This is the css
body, html {
height: 100%;
width: 100%;
}
#container {
display: flex;
position: absolute;
flex-flow: column wrap;
justify-content: stretch;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
where #container is a sibling of div.sections, both directly under the body tag.
The problem is #container's height overflows the body by div.sections's height.
I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript,
but I'd really like to see the solution in css.
I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
height: 500px; /* Height Value as you want */
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
I'm trying to vertically center a div using only display flex. I know how to do this with other methods, but need some insight on why this does not work. (The container do get horisontally centered but, not vertically)....
<body>
<div class="container"></div>
</body>
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center; //works fine
align-items: center; //
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
}
Yes, it gets centered, as you can see here:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px green;
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
border: solid 1px red;
}
<div class="container"></div>
But probably what you want is this
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px green;
height: 100%;
}
html {
height: 100%;
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
border: solid 1px red;
}
<div class="container"></div>
I want the color of my box to be very opaque in the middle and then to fade out as it gets closer to the border.
You can use box-shadow for this purpose.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
div {
width: 25vw;
height: 25vw;
background: royalblue;
box-shadow: 0 0 10px navy;
}
<div></div>
Update:
After seeing a picture of what you were looking for, I tried to better match that. Still with box-shadow.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
div {
width: 25vw;
height: 25vw;
background: #999999;
box-shadow: inset 0 0 10vw 2.5vw white;
}
<div></div>
I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on IE 11:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
}
<div id="div">
<button id="button">HELLO</button>
</div>
My goal is that, when I use transform with rotate(90deg) or rotate(270deg), the button will fit into the div:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
The height and width of the div and button are always the same, but are customizable.
As much as possible, I prefer not wrapping elements.
IE11 needs the parent to have flex-direction: column.
This example has your button rotated:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.
I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.