I'm trying to create a rotated header for a compact table, and it works fine in Chrome but not Firefox.
Code:
div {
display: flex;
align-items: stretch;
}
span {
border-left: 1px solid black;
writing-mode: vertical-lr;
transform: rotate(200deg);
display: inline-flex;
align-items: center;
padding: 0;
white-space: nowrap;
width: 35px !important;
}
<div>
<span><b>Hello</b> world</span>
<span><b>Foo</b> bar</span>
</div>
In Chrome (and Edge) I get:
In Firefox I get:
If I take the align-items: center out I get the same behaviour in all browsers, but I obviously lose my alignment:
I guess I can hack this with padding, but I'd rather know what it's doing for future reference.
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>
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'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/
Open this page in Chrome and in Safari and we can see the difference.
In Safari the "Maths" keyword is not on the right side as in Chrome.
Also the widths of the item-3 div is different in Chrome and in Safari.
My issue is that why it is different in Safari and what is the fix (I want CSS fix on the item-3).
flex-wrap: wrap is not a acceptable solution.
.main-container {
display: flex;
flex-direction: column;
width: 400px;
height: 300px;
border: 1px solid red;
}
.item-1 {
display: flex;
border: 1px solid blue;
}
.item-2 {
display: flex;
border: 1px solid green;
}
.item-3 {
display: flex;
margin-left: auto!important;
border: 2px solid yellow;
}
<div class="main-container">
<div class="item-1">Physics</div>
<div class="item-2">Chemistry</div>
<div class="item-3">Maths</div>
</div>
The width of .item-3 is different than its siblings because margin-left: auto packs the flex item to the right side. That's normal behavior for flex auto margins.
The reason margin-left doesn't work in Safari is a mystery / bug.
However, for cross-browser support, there is a simple flex alternative to auto margins in this case: align-self: flex-end
.main-container {
display: flex;
flex-direction: column;
width: 400px;
height: 300px;
border: 1px solid red;
}
.item-1 {
display: flex;
border: 1px solid blue;
}
.item-2 {
display: flex;
border: 1px solid green;
}
.item-3 {
display: flex;
align-self: flex-end; /* NEW */
border: 2px solid yellow;
}
<div class="main-container">
<div class="item-1">Physics</div>
<div class="item-2">Chemistry</div>
<div class="item-3"><span>Maths</span></div>
</div>
If you want .item-3 to keep the full width of the container, then use justify-content: flex-end.
.main-container {
display: flex;
flex-direction: column;
width: 400px;
height: 300px;
border: 1px solid red;
}
.item-1 {
display: flex;
border: 1px solid blue;
}
.item-2 {
display: flex;
border: 1px solid green;
}
.item-3 {
display: flex;
justify-content: flex-end; /* NEW */
border: 2px solid yellow;
}
<div class="main-container">
<div class="item-1">Physics</div>
<div class="item-2">Chemistry</div>
<div class="item-3">Maths</div>
</div>
How align-self: flex-end works
With align-self: flex-end you're shifting .item-3 along the cross axis all the way to the right.
This works because the flex container (.main-container) has flex-direction: column, which makes the main axis vertical and cross axis horizontal.
How justify-content: flex-end works
With justify-content: flex-end you're shifting the children of .item-3 along the main axis all the way to the right.
This works because .item-3 is a flex container with flex-direction: row (by default), which makes the main axis horizontal and cross axis vertical.
Then, as per the specification, text in a flex container that is not explicitly wrapped by an element, is considered an anonymous flex item. This allows justify-content to work.
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
Why text-align: right doesn't work
text-align: right won't work because flex items (including anonymous ones) are considered block-level elements. The text-align property applies only to inline-level content.
More information
Learn more about flex alignment along the main axis here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Learn more about flex alignment along the cross axis here:
How does flex-wrap work with align-self, align-items and align-content?
Consider this:
<div class="parent">
<div class="child"></div>
</div>
.parent {
display: flex;
flex-direction: column;
background: teal;
width: 100%;
justify-content: center;
}
.child {
display: flex;
background: red;
width: 50%;
height: 20vh;
max-height: 20px;
}
Chrome (57), Firefox (52), IE (Edge) render is like so:
But Safari (Version 9 on a Mac with OS X) renders it like so:
I consider Safari's rendering wrong, tell me if you disagree.
If you remove either justify-content: center or max-height: 20px or change height: 20vh to height: 20px Safari renders like the other browsers (what I would consider correct).
Codepen: https://codepen.io/anon/pen/jmrOjq
Is this a known Safari bug? Am I miss using flex-box here?