CSS Вертикальная шкала времени

Question

Я пытаюсь создать вертикальную шкалу времени вниз по середине страницы начальной загрузки с кругами, представляющими каждую дату вдоль нее.

устанавливаемых сотовое У меня до сих пор:

.middleline { 
     list-style: none; 
     position: relative; 
     padding: 20px 0px 20px; 
    } 

    .middleline:before{ 
     top: 0; 
     bottom: 0; 
     position: absolute; 
     content: " "; 
     width: 3px; 
     background-color: #608dc5; 
     left: 50%; 
     margin-left: -1.5px; 
    } 

    .middleline li{ 
     position: absolute; 
     width: 40px; 
     height: 40px; 
     background-color: #4f80bf; 
     border-radius: 50px; 
    } 

Я возился с этим в течение нескольких часов в настоящее время, но не могу получить его в центр с графиком кругами (Li) над ним. Строка должна быть слева, а круги - вправо. Перемещение их справа/слева просто подталкивает их к концу страницы.

любые идеи?

Fiddle всей страницы: https://jsfiddle.net/vtb4t17h/

Answer 1

ли вы имеете в виду, как это: https://jsfiddle.net/vtb4t17h/1/

В принципе изменить .middleline li

Чтобы выглядеть следующим образом:

.middleline li { 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    background-color: #4f80bf; 
    border-radius: 50px; 
    left: 50%; 
    margin-left: -20px; 
    list-style: none; 
} 

Я добавил:

left: 50%; 
    margin-left: -20px; 
    list-style: none; 

Что я сделал

Я компенсировать left:50% (который приносит литиево точно в центре), вещь, они являются 40px широкий, поэтому они должны быть возвращены в на 20px так получить центр этого элемента, так margin-left:-20px делает это