pseudo element not aligning at top left corner
The source of the problem is align-content
here:
.centerContainer {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center; <-- causing the problem
flex-direction: row;
flex-wrap: wrap;
}
When you tell the lines in a flex container to be centered, this collapses all extra space, packing all lines in the center of the container. That's what align-content: center
does.
So your counter pseudo-element, which the browsers consider a flex item, should not move to the top of the container. The align-self: flex-start
you have specified should fail to achieve your goal because the item is confined to the centered flex line, along with its siblings.
So Firefox has this right, in terms of adherence to the spec.
Chrome, as it often does (see here and here for examples), appears to be factoring in logical user behavior to improve the user experience (they call this an intervention).
Anyway, once you remove align-content: center
, the stretch
default value takes over again, and your flex items can move freely along the entire height of the container.
.tiles { /* flex properties as container (tiles level 1, 2 & 3) */ display: flex; flex-wrap: wrap; justify-content: center; align-items: strech; align-content: strech; /* flex properties as content (tiles level 2 & 3) */ flex-grow: 1; flex-shrink: 1; flex-basis: strech;}
.tiles.level1 { flex-direction: column; flex-grow: 0; width: 600px; height: 300px; counter-reset: tileNum;}
.tiles.level2 { flex-direction: row;}
.tiles.level3 { flex-direction: row;}
.tiles .title { align-self: center; font-size: 42px;}
.tile { border: 1px solid black; background-color: white; width: 1px; flex-grow: 1; flex-shrink: 1; flex-basis: auto; /* auto = use width & height values if available */ font-size: 24px;}
.centerContainer { display: flex; justify-content: space-between; align-items: center; /* align-content: center; <-- REMOVE */ flex-direction: row; flex-wrap: wrap;}
.centerContent { /* flex-grow: 1; flex-shrink: 1; align-self: center;*/}
.tile:before { counter-increment: tileNum; content: counter(tileNum); align-self: flex-start; flex-grow: 0; font-size: 16px;}
.tile:after { content: ' '; align-self: flex-end; flex-grow: 0; font-size: 16px;}
.brand { text-decoration: underline; font-variant: small-caps;}
<section class="section static"> <div class="tiles level1"> <span class="title"> <span class="brand">So</span>mething </span> <div class="tiles level2"> <div class="tiles level3"> <span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> <div class="tiles level3"> <span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> </div> <div class="tiles level2"> <div class="tiles level3"> <span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> <div class="tiles level3"> <span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> <span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span> </span> </div> </div> </div></section>
Problem with alignment of pseudo elements
In case you are intrested you can simplify your code without the need of using pseudo element:
.loader-container { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: aquamarine;}
.loader { border: 2px solid red; height:102px; width:150px; background: /*circle with a radius of 25px and border 2px blue*/ radial-gradient(circle at center, transparent 24px,blue 25px,blue 26px,transparent 27px), /*circle with a radius of 50px and border 2px green*/ radial-gradient(circle at center, transparent 49px,green 50px,green 51px,transparent 52px);}
<div class="loader-container"> <div class='loader'></div></div>
CSS vertical alignment of :before pseudo element and td content
I found the solution myself...
The problem was in fact the .cshtml razor syntax compilation.
Since those date fields were placed within a c# if-statement I formatted the code like usual:
@if(startDate != DateTime.MinValue)
{
<td class="ta-left" data-label="Start">@startDate</td>
}
The text identiation and the line breaks for clean code here were the problem.
The razor compiler inserted a break for those parts. The problem could be fixed using the following razor markup:
@if(startDate != DateTime.MinValue){<td class="ta-left" data-label="Start">@startDate</td>}
vertical align pseudo element in list navigation
Here you go:
a:after {
content:'>';
color: #ce4300;
font-size: 1.125em;
position: absolute;
line-height: 0;
right: 1em;
top: 50%;
bottom: 50%;
}
Surprisingly simple :D
CSS how to vertically align text within a pseudo element
Easiest way? Add padding top. Little more difficult but better way, use flexbox.
These properties will do
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
http://jsfiddle.net/6dqxt2r3/4/
How to center an after pseudo-element above it's parent responsively?
The :after
pseudo element is naturally left-aligned with its parent element, and since its width is wider than the <span>
parent, it looks off center.
A quick fix is to make the :after
pseudo element and <span>
have the same width so that they're perfectly aligned:
<style lang="sass">
[data-tooltip]
&:hover::after
width: 100%
</style>
demo
Related Topics
CSS Dot Leaders with Textured Background
Alternative to Page-Break-Inside:Avoid Because of Compatibility Issues
CSS Images Not Showing in ASP.NET MVC
How to Apply Different Styles to Different Letters in Word
Keeping A: Active Until Another Link Is Clicked
CSS 3 Column Liquid Layout Dynamic Same Height Column
Print Contents of a Modal Popup
Less CSS Retina Media Queries Without Redundancy
The Meaning and Benefits of Flex: 1
Css- Multiple Background Image
How to Change Primefaces Submenu Default Icons
How to Compile an Existing Project Because Compass Can't Find It
CSS Transform Causes Flicker in Safari, But Only When the Browser Is >= 2000Px Wide
Polymer @Import Theme File with :Host in Styles Has No Affect