DlafCreative DlafCreative - 1 month ago 18
Less Question

Center align absolute elements inside flex items

I'm trying to horizontally align two absolute positioned elements inside a flex item.

This is my current CodePen

HTML :

<div class="stepper-wrapper">
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
</div>


CSS :

.stepper-wrapper {
display: flex;
flex-direction: row;
}
ul {
border: 1px solid grey;
height: 0px;
position: relative;
top: 40%;
min-width: 100px;
flex: 1;
li.step__bubble {
display: inline-block;
vertical-align: middle;
}
li.step__bubble::before {
content: "";
position: absolute;
top: -9px;
left: calc(50%);
display: block;
width: 16px;
height: 16px;
border: 2px solid grey;
border-radius: 50%;
background: white;
}
li.step__circle {
width: 8px;
height: 8px;
border: 1px solid red;
border-radius: 50%;
display: block;
position: absolute;
top: -4px;
left: calc(50% + 1px);
}
}


What I want to do is :


  • Having the grey circle vertically and horizontally aligned over the
    line. Vertically is not really a pb, I'm able to set a fixed value as the height of the
    .stepper-wrapper
    will be fixed. Horizontally needs to be adaptative and it's where I'm stuck.

  • Having the red circle right inside the grey circle



I tried to use the
calc()
function and set it to
(50% - width_of_element_in_px/2)
for both circles, but I don't know why, each px seems to be ~10px.

Thx for your help

Answer

Welcome to the club of the LESS users pwned by calc() and string interpolation
I've been using LESS since 5 years and it still happens from time to time :(

Sooo tl;dr calc() was and is a LESS function that its compiler will happily output as some result (probably 50% + 10(stripped) => 60%).
If you want LESS compiler to output calc() the CSS Level 3 function, you need to escape it, that is wrap it in ~"calc(50% + 5px)"!

Codepen

EDIT: also see http://stackoverflow.com/a/17904128/137626
EDIT2: couldn't find an entry about calc in LESS documentation oO but the problem is explained in http://lesscss.org/usage/#command-line-usage-options (search "calc" in text). strict-math is a cool option but you'll have to make sure everybody else has it activated (won't be the case by default)