so i have created this flexbox container with some flex-items:
so what i have is when i press on overview or alerts, it doesn't have this white border background color, when i press on one of them it will trigger a class called .selected and will color the background in white.
the problem is when i press on one of them the white border is not spamming the entire width ( from start to end) also the text inside the background is not centered in the middle when i press it and i don't know why
code:
<div className="container">
<div className="flex-item item-1 item">John Smith</div>
<div className="flex-item item-2 item">Male, 26 years old</div>
<div className='flex-item item-3 item'onClick={setSelectedItem} style={style} > Overview</div>
<div className='flex-item item-4 item'onClick={setSelectedItem} style={style}>Alerts</div>
</div>
</div>
css code:
.container {
border: 2px solid #57c0e8;
background-color: #57c0e8;
margin-top: 5%;
float: left;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
color:white;
display: flex;
flex-direction: column;
height:40rem;
width:15rem;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
font-size:0.9rem;
}
.flex-item{
margin-top: 2rem;
}
.selected{
background-color: white;
color: #57c0e8;
border-radius: 50px 0 0 50px;
box-shadow: 2px 2px 5px lightgray;
width: 14rem;
height: 5%;
text-align: left;
}
If I understood correctly, you want the white part where it says "Overview" to have the text centerent vertically.
If this is the case, I would give your .selected element display:flex; align-items:center; . For the part with the width of it, seems like you have a cointainer that has a fixed width. As we dont have a codepen, I can't say for sure, but I think that width is the problem. Try removing it , and give all items but that "Overview" a padding left. Tell me what happens after you do it.
Would like me some codepen.
for .selected, remove border-radius and make width:100%
To center (vertically) text inside, just add align-items: center to .flex-item:
.flex-item {
display: flex;
align-items: center;
}
And to be full width, change to width: 100% on .selected
Related
I’m trying to create resizing buttons using CSS. Here’s what I have so far (onclick handlers will come later).
It’s almost correct, except the text in the last button (just a hyphen), isn’t centered vertically. The first two buttons are vertically centered as intended, but not the last button.
Can anyone see what I’m doing wrong? I’m guessing it might something inherent in the way the dash character is designed in this font. It that’s the case, can anyone suggest a better Unicode dash character that would properly align vertically?
body {
background-color: Aqua;
}
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
display: block;
font-size: 200%;
}
.button div {
vertical-align: middle;
font-weight: 800;
}
.button:not(:last-child) {
margin-bottom: .4cm;
}
<body>
<div style="text-align:center">
<h1>Resizer Buttons</h1>
<span class="button"><div>+</div></span>
<span class="button"><div>×</div></span>
<span class="button"><div>–</div></span>
</div>
</body>
Try <span class="button"><div>−</div></span> for the last button. Also, when I tried your code in my computer the text in the buttons didn't center vertically and I changed the display property of button class to flex. You might want to consider doing that as well.
A note first: In the snippet you posted, also the first two button's contents are not properly center-aligned vertically.
BUT: If you add display: flex; flex-direction: column; justify-content: center; to the CSS rule for .button, the alignment works as intended.
This changes the display property from block to flex, in this case "vertical flex" (i.e. flex-direction: column) and (vertically) centers the contents using justify-contents: center
body {
background-color: Aqua;
}
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
font-size: 200%;
display: flex;
flex-direction: column;
justify-content: center;
}
.button div {
font-weight: 800;
}
.button:not(:last-child) {
margin-bottom: .4cm;
}
<div style="text-align:center">
<h1>Resizer Buttons</h1>
<span class="button"><div>+</div></span>
<span class="button"><div>×</div></span>
<span class="button"><div>–</div></span>
</div>
You could use display:flex for the button instead of block. Then you can use align-items:center and justify-contentcenter` like this:
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
font-size: 200%;
}
You will need to work with the minus symbol for your last button because it doesn't play well with the alignment. Sunay's suggestion sounds like a good alternative.
demo:https://codepen.io/joondoe/pen/BaBJjqe
I have seen that the css box model include margin as the most outter component of the box model. I am wondering if it is possible to add a background color in the margin of a box element.
div{
display:flex;
text-align:center;
justify-content:center;
align-items:center;
background:orange;
height: 30px;
border: 15px solid green;
margin:50px;
/* to illustrate what I would accomplish */
margin-background:pink;
}
<div> I am a div </div>
I guess you are simply looking for box-shadow:
div{
display:flex;
text-align:center;
justify-content:center;
align-items:center;
background:orange;
height: 30px;
border: 15px solid green;
margin:50px;
box-shadow:0 0 0 50px pink;
}
<div> I am a div </div>
No, you can't do this with a margin, and I see that you've already used border which would be the obvious one to use for what you're asking for.
Other options to achieve the kind of effect you're looking for include:
box-shadow
outline
::before and ::after
Each of these works quite differently, but they could all pull off the effect you've asked for, namely an additional coloured shell around a box, outside of the border.
If you want other background effects such as background images, however, your options are probably limited to using ::before and ::after.
It's not possible (as other answers pointed out), but you could keep what you're doing with use of the ::before (or ::after) pseudo
div {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
background: orange;
height: 30px;
border: 15px solid green;
margin: 50px;
position: relative;
}
div::before {
content: '';
display: block;
position: absolute;
width: calc(100% + 100px);
height: calc(100% + 100px);
left: -50px;
top: -50px;
background: pink;
z-index: -1;
}
<div>
test
</div>
It's not possible to change background color of margin property. I'd prefer to go down the root of wrapping the element in a container that respects your margin instead abusing other properties and pseudo styles. This supports all browsers.
.container {
background-color: red;
display: flex;
}
.container div {
flex: 1 1;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
background: orange;
height: 30px;
border: 15px solid green;
margin: 50px;
}
<div class="container">
<div>I am a div </div>
</div>
I am trying to evenly space out inline-elements inside a 90% width container. I already looked for a solution and tried different things with zero success.
The most promising idea was the text-align: justify with and 100% width child
Here is my code:
<div id="stage">
<div class="thumb">
<img src="generic_source" height="200px"/>
</div>
<div class="thumb">
<img src="generic_source" height="200px"/>
</div>
.
.
.
.
</div>
CSS:
#stage {
width: 90%;
margin: 50px auto;
text-align: justify;
border: 1px solid black;
}
#stage::after {
display:inline-block;
width:100%;
content:'';
}
.thumb {
height: 200px;
display: inline-block;
margin: 10px;
width: 300px;
text-align: center;
padding: 2px;
}
Everything looks great except the space left on the right. Zooming in and out makes it more or less obvious, but obvious nonetheless
I have 100+ thumbs that i would like to see symmetrically arranged
Thank you
EDIT:
Here you can see the example. Notice the space left to the right side border when scaling the page
I think the only way to do it in css is by using flexbox. You'll need to change #stage selector:
#stage{
width: 90%;
margin: 50px auto;
text-align: justify;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
if you can't use it (need to support older browsers) you can try a js solution like freewall
Can't figure out how to keep the child items same height on both sides after aligning their content to the middle.
My aim is to create a layout as seen in picture:
<div class="halves">
<div class="half">
<div class="half-inner is-right">H1</div>
</div>
<div class="half">
<div class="half-inner is-left">H2
<br> asdfs df <br>a sdfadsf sdfa dadsf df asdf afdf sadf asdf </div>
</div>
.halves{
display: flex;
border: 5px solid red;
.half{
flex: 1;
border: 10px solid yellow;
/* align-items: center; */
display: flex;
.half-inner{
max-width: 100px;
&.is-right{
margin-left: auto;
background: pink;
}
&.is-left{
background: green;
}
}
}
}
My current code here: http://codepen.io/zsitro/pen/YqpLba
In my example uncommenting /* align-items: center; */ you can see the child item collapses.
I appreciate any guidance. ty
align-items: center forces the div into the center of a flex container, and in the event of no specific declarations of width/height/flex-basis/whatnot, it makes the div as big as its content, preserving the whitespace. If you want the div to stretch, you will need the the align-items value to be stretch so it takes up the entire height of the parent container.
Additionally, if you want the .half-inner divs to be equal in width: flex: 1 (or flex-grow: 1) is a child property, so the declaration you currently have only applies to the .half divs, not the .half-inner divs. Since the parent .half div is a flex container, you can just add flex:1 under the .half-inner CSS and you should be good to go.
.halves{
display: flex;
border: 5px solid red;
.half{
flex: 1;
border: 10px solid yellow;
align-items: stretch;
display: flex;
.half-inner{
max-width: 100px;
flex: 1;
&.is-right{
margin-left: auto;
background: pink;
}
&.is-left{
background: green;
}
}
}
}
I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can't get it done. Basically my HTML code is like this:
<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
<span style='position:absolute; bottom:0px;'>A Text</span>
</div>
The effect is that in FF I just get vertical line (the div in a collapsed way) and the text is written next to it. How can I prevent the div collapsing but having the width fitting to the text?
Flex Solution
It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.
.wrap {
height: 200px;
width: 200px;
border: 1px solid #aaa;
margin: 10px;
display: flex;
}
.wrap span {
align-self: flex-end;
}
<div class="wrap">
<span>Align me to the bottom</span>
</div>
In the above example, we first set the parent element to display: flex; and later, we use align-self to flex-end. This helps you push the item to the end of the flex parent.
Old Solution (Valid if you are not willing to use flex)
If you want to align the text to the bottom, you don't have to write so many properties for that, using display: table-cell; with vertical-align: bottom; is enough
div {
display: table-cell;
vertical-align: bottom;
border: 1px solid #f00;
height: 100px;
width: 100px;
}
<div>Hello</div>
(Or JSFiddle)
You now can do this with Flexbox justify-content: flex-end now:
div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 150px;
height: 150px;
border: solid 1px red;
}
<div>
Something to align
</div>
Consult your Caniuse to see if Flexbox is right for you.