Center align absolute elements inside flex items

Question

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

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

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 https://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)

edited May 23 '17 at 10:34

Community

1
1

answered Oct 28 '16 at 10:17

FelipeAls

21,711
8
54
74

This does not answers the question. he is using css only. – Atul Sharma Oct 28 '16 at 10:29
Ahah I've been tricked once again. Comforted to know it still happens to you ^^. Thanks a lot, that does the job. Also another question : you did (50% + 5px). Those 5px are 8px of element width divided by 2 + 1px of border, is it right ? – DlafCreative Oct 28 '16 at 10:34
@atulquest93 He is using LESS. Please check his Codepen: it's written "CSS (LESS)". Also check his code: 3 rules about `li` are imbricated in an `ul` rule. That's not valid CSS (for now) but valid LESS/Sass code. – FelipeAls Oct 28 '16 at 10:34
@DlafCreative Yes that's (radius + border) or half the total width (which is 1+8+1 = 10px, in standard box sizing model) – FelipeAls Oct 28 '16 at 10:38

Center align absolute elements inside flex items

1 Answers1