I have a container div with 2 spans inside it. When I try to align-items: center i lose the height and border-radius of the spans. I'd like them to retain their heights and border radius, while just being centered. How can I do this?
CSS of parent div:
const Container = styled.div`
display: inline-flex;
overflow: hidden;
border-radius: 4px;
margin: 0px 8px 10px 8px;
height: 70px;
`;
CSS of child span:
const TextContainer = styled.span`
padding: 8px 11px;
`;
Before align-items: center:
After align-items: center:
You can add display: flex to span and align items.
.container {
display: inline-flex;
overflow: hidden;
border-radius: 4px;
margin: 0px 8px 10px 8px;
height: 70px;
}
span {
display: flex;
padding: 8px 11px;
background: #f00;
align-items: center;
}
<div class="container">
<span>Match Rank</span>
<span>
<img src="https://i.picsum.photos/id/83/60/50.jpg" />
</span>
</div>
This is actually due to inline-flex setting a vertical align of baseline.
Removing the align-items would change it to stretch but you probably don't want to do that.
SOLUTION1
What happens if you use align-items: flex-start
SOLUTION2
Or you could try setting the vert align to top, that may fix it.
const TextContainer = styled.span`
vertical-align: top;
padding: 8px 11px;
`;
Can you try those and let me know how it turns out ? Thanks
Related
I'm currently trying to align the number 238,741 and the letter N in Number. Currently I have a padding between the Prize Pool div and the Number Active div. They're all contained within a parent with display set to flex and flex-direction: column. They're then within another parent container with display flex and direction set to row. I tried setting different paddings between the divs but when I zoom in or out they don't maintain their position.
I cannot figure out how to make them align and stay aligned when zooming in and out or going into mobile view. I've spent 7 hours on it and made little progress by going through CSS tricks.
Code:
<Wrapper>
<HeaderWrapper row alignItems="center">
<PrizeText variant={TextVariant.subhead}>Prize Pool</PrizeText>
<Text color={TextColor.primary} fontWeight="600" variant={TextVariant.subhead}>Number Active</Text>
<GoldText style={{'padding-right': '26%'}} variant={TextVariant.display}>$7,162,245</GoldText>
<GoldText color={TextColor.primary} variant={TextVariant.display}>238,741</GoldText>
</HeaderWrapper>
</Wrapper>
const HeaderWrapper = styled(Box)`
height: auto;
align-items: flex-start;
/* border: 2px solid white; */
flex-wrap: wrap;
margin-top: 45px;
margin-left: 32px;
`;
const MoneyWrapper = styled(Box)`
height: auto;
align-items: flex-start;
/* border: 2px solid white; */
flex-wrap: wrap;
margin-left: 32px;
`;
const GoldText = styled(Text)`
background-image: linear-gradient(98.84deg, #C9882B 0%, #E7CA66 47.71%, #C69935 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
white-space: nowrap;
`;
const PrizeText = styled(Text)`
padding-right: 152px;
color: ${props => props.theme.palette.text.primary};
font-weight: 600;
white-space: nowrap;
`;
const Wrapper = styled(Box)`
position: relative;
border: 2px solid white;
width: 100%;
/* justify-content: center; */
align-items: center;
`;
A Box is just a div, with display set to flex and can take the prop col or row to change the flex direction.
It might help to rethink the structure of your components. If you wrap <PrizeText> and <GoldText> in a container and <Text> and <GoldText> in another container then things will fall into place for you.
Kind of like this:
.wrapper {
display: flex;
justify-content: space-around;
padding: 1rem;
}
.missing-wrapper {
width: 50%;
}
h1, h5, div {
border: 1px solid red;
}
<div class="wrapper">
<div class="missing-wrapper">
<h5>Prize Pool</h5>
<h1>$7,162,245</h1>
</div>
<div class="missing-wrapper">
<h5>Number Active</h5>
<h1>238,741</h1>
</div>
</div>
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
I'm having an issue getting a spans' inner text to be vertically centered on Firefox
Here's a screenshot of the firefox devtools highlighting the span element.
This Works as expected on Chrome and Safari.
<button
style={{ marginTop: this.state.marginTop }}
className={`info-tab-title`}
>
<img
className="tab-icon"
src="/images/neighborhood/train.svg"
alt="train icon"
/>
<span>TO BROOKLYN</span>
</button>
.info-tab {
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
background-color: #e5e8ea;
padding: 2% 4% 4% 4%;
margin-bottom: 8px;
cursor: pointer;
height: 100%;
max-height: calc(16.67% - 6px);
transition: 0.25s max-height ease-in-out;
&:last-child {
margin-bottom: 0;
}
.info-tab-title {
display: flex;
flex-direction: row;
align-items: flex-start;
font-family: 'BrownStd Regular';
font-size: 16px;
font-weight: bold;
letter-spacing: 0.35px;
line-height: 16px;
min-height: 26px !important;
align-items: center;
#media #{$mobile-break} {
font-size: 14px;
}
.tab-icon {
margin-right: 2.5%;
height: 100%;
width: auto;
}
}
}
Ideally, the text would be vertically centered inside the span.
This is not a duplicate, the suggested answers are all addressing aligning two elements in a parent. This is referring to a browser specific problem with aligning the innerHTML content of a span.
You are doing all right. Font metrics of BrownStd cause this issue. The distance from symbol baseline to bottom of font content area is bigger than distance to top.
Not sure you can perfectly align text and icon without some tricks like negative margins or absolute positioning.
You can read this article about font metrics, it's pretty hard to understand.
button {
display: inline-flex;
align-items: center;
padding: 10px;
height: 50px;
border: 1px solid;
}
div {
margin-right: 10px;
width: 25px;
height: 25px;
background-color: red;
border-radius: 50%;
}
span {
background-color: blue;
font-family: sans-serif;
color: white;
}
<h1>Nice font —</h1>
<button>
<div></div>
<span>nice vertical alignment</span>
</button>
Codepen demo with custom BrownStd font.
If by "innerHTML content of a span" you're referring to the bounding box of the text, I believe the only way to manipulate that in CSS is via line-height, and you can't change how the text is aligned within its line-height.
In this case, I would try reducing the line-height to the exact height of the text, and then align-items: center on the parent should work.
I need center to center some text on X and Y axes. I noticed that my text is not on full height, which is best solution to give text full height?
I tried to center with:
1. Line height
2. Transform
3. Flex
4. Table - table cell - vertical align
HTML:
<div class="block">
<p> 3 </p>
</div>
SCSS:
.block {
display: table;
width: 50px;
height: 50px;
padding: 0 10px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: #ecf3f5;
border: 1px solid #c9dee4;
margin-right: 20px;
p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
What I meant with full height
This height really matter, for Small font it's not visible but with
Large font it's really un-centered.
I expect to center this text.
I think flex is the best and universal method to center element on X and Y, so add
display: flex;justify-content: center;align-items: center; to you parent block. After that you can use anyone font-height what you want.
.block {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
padding: 0 10px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: #ecf3f5;
border: 1px solid #c9dee4;
margin-right: 20px;
}
p {
line-height: 20px;
}
<div class="block">
<p> 3 </p>
</div>
I found the problem, un-alignment was caused by font family, in my case I used Helvetica, after change text alignment fixed.
https://giphy.com/gifs/SYFl4xIvOdFS6e8X9q/html5
I've researched this and tried all the solutions and yet the text is not vertically aligned.
jsfiddle: http://jsfiddle.net/9a6pdfbt/
html:
<a>משטרה</a>
css:
a {
font-size: 2rem;
border: 2px solid black;
padding: 10px;
display: flex;
align-items: center;
vertical-align: middle;
}
If you use ctrl+shift+c to examine the a tag, you can see that the text is aligned to the bottom of the a tag and not in the exact middle
If you're trying to align your text in the center, vertically, there are multiple ways you can do it.
One way is to use absolute positioning like so (won't work for Bootstrap Columns):
.parent-class {
position: relative;
}
.parent-class a {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
And in your HTML:
<div class="parent-class">
<a>משטרה</a>
</div>
If you're using Flexbox, all you need is this in your CSS:
a.flexbox {
display: flex;
align-items: center;
justify-content: center;
}
And in your HTML:
<a class="flexbox">משטרה</a>
Unless you specify a height, the text should always be vertically aligned.
a {
font-size: 2rem;
border: 2px solid black;
padding: 20px;
display: flex;
align-items: center;
vertical-align: middle;
background-color: red;
}
<a>משטרה</a>
If you do specify a height, the flexbox should do it all for you. What would break your code there would be the display: inline-block;. I fixed the Fiddle for you: http://jsfiddle.net/3L5d7awj/