0

Есть табы с декоративными кнопками. В некоторых кнопках идеально встаёт посередине. В других едет, рисунок...

Картинка

Как сделать чтоб во всех было ровно? Пробовал задавать флексы, гриды. Менять позиционирование абсолютное/относительное. Менять top, left, bottom... — Если и поправлялось временно, то при следующем открытии - опять разъезжается всё!

    window.tabaction = function(obj, i) {
        obj.blocks.forEach((item) => item.classList.remove(obj.active_class));
        obj.blocks[i].classList.add(obj.active_class);
        if(obj.animation_class) {
            obj.blocks.forEach((item) => item.classList.remove(obj.animation_class));
            obj.blocks[i].classList.add(obj.animation_class);
        }
    };
  
  const ACTIVE_CLASS = 'about__text--active';
    const ANIMATION_CLASS = 'tab-animation';
    const ACTIVE_BLOCK = 'scale__block--active';

    var buttonsWrap = document.querySelector('.scale');
    var buttons = document.querySelectorAll('.scale__button');
    var blocks = document.querySelectorAll('.about__text');

    buttonsWrap.addEventListener('click', onChangeTabs);

    function onChangeTabs(evt) {

        for (let i = 0; i < buttons.length; i++) {
            if (evt.target.classList.contains('scale__button') && evt.target == buttons[i]){

                window.tabaction({
                    buttons : buttons,
                    blocks : blocks,
                    active_class : ACTIVE_CLASS,
                    animation_class : ANIMATION_CLASS,
                }, i);

            сhangeButton(i);
            }
        }
    }

    function сhangeButton(i){
        buttons.forEach((item) => item.parentNode.classList.remove(ACTIVE_BLOCK));
        buttons[i].parentNode.classList.add(ACTIVE_BLOCK);
    }
.scale
{
    background: -webkit-gradient(linear,left top,right top,from(#d0d5e3),to(#d4d8e4)) #c8cede;
    background: linear-gradient(to right,#d0d5e3 0,#d4d8e4 100%) #c8cede;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 610px;
    height: 2px;
    margin-top: 75px;
    margin-left: 110px;
}

@media (max-width:1000px)
{
    .scale
    {
        margin-left: 80px;
        width: 400px;
    }
}

@media (max-width:768px)
{
    .scale
    {
        margin-left: auto;
        margin-right: auto;
        width: 270px;
    }
}

.scale__block
{
    position: relative;
    top: -34px;
    left: 0;
    margin-right: -10px;
}

.scale__block--active.scale__block
{
    top: -42px;
}

.scale__block--active:first-of-type
{
    margin-left: -15px;
}

.scale__block--active:last-of-type
{
    margin-right: -20px;
    margin-left: 70px;
}

.scale__block--active:not(:last-of-type)
{
    margin-right: 70px;
}

@media (max-width:1000px)
{
    .scale__block--active:last-of-type
    {
        margin-left: 40px;
    }

    .scale__block--active:not(:last-of-type)
    {
        margin-right: 40px;
    }
}

@media (max-width:768px)
{
    .scale__block--active:last-of-type
    {
        margin-left: 20px;
    }

    .scale__block--active:not(:last-of-type)
    {
        margin-right: 20px;
    }
}

.scale__text
{
    font: normal 400 14px/30px "Exo 2";
    color: #b1b6c4;
    letter-spacing: normal;
    padding-bottom: 0;
    text-decoration: underline;
    -webkit-text-decoration-style: dotted;
    text-decoration-style: dotted;
}

.scale__block--active .scale__text
{
    font: italic 400 16px/30px "Exo 2- Semi Bold Italic";
    color: #333;
    letter-spacing: normal;
    text-decoration: none;
}

.scale__block--active .scale__button::before
{
    background: #fff;
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    text-align: center;
    width: 18px;
    height: 18px;
    border: 3px solid #c8cede;
    border-radius: 50%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.scale__block--active .scale__button::after
{
    background: -webkit-gradient(linear,left bottom,left top,from(#ed8439),to(#ffac70)) #fff;
    background: linear-gradient(to top,#ed8439 0,#ffac70 100%) #fff;
    content: "";
    position: absolute;
    top: 5.5px;
    left: 9%;
    text-align: center;
    width: 12px;
    height: 12px;
    -webkit-box-shadow: 0 20px 30px rgba(0,0,0,.2);
    box-shadow: 0 20px 30px rgba(0,0,0,.2);
    border: 1px solid #c8cede;
    border-radius: 50%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.scale__block--active .scale__button:focus::before,.scale__block--active .scale__button:hover::before
{
    border-width: 3px;
    border-color: #333;
}

.scale__button
{
    background: 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    font-family: inherit;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 150ms;
    transition-duration: 150ms;
    position: relative;
}

.scale__button:focus,.scale__button:hover
{
    opacity: .9;
}

.scale__button:active
{
    opacity: .7;
}

.scale__button::before
{
    background: #fff;
    content: "";
    position: relative;
    bottom: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border: 1px solid #c8cede;
    border-radius: 50%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.scale__button:focus::before,.scale__button:hover::before
{
    border-width: 2px;
    border-color: #333;
}
        <section class="about">
          <div class="scale">
            <div class="scale__block scale__block--active">
              <div class="scale__text text">2010 г.</div>
              <div class="scale__button"></div>
            </div>
            <div class="scale__block">
              <div class="scale__text text">2011 г.</div>
              <div class="scale__button"></div>
            </div>
            <div class="scale__block">
              <div class="scale__text text">2012 г.</div>
              <div class="scale__button"></div>
            </div>
            <div class="scale__block">
              <div class="scale__text text">2013 г.</div>
              <div class="scale__button"></div>
            </div>
            <div class="scale__block">
              <div class="scale__text text">2014 г.</div>
              <div class="scale__button"></div>
            </div>
            <div class="scale__block">
              <div class="scale__text text">2015 г.</div>
              <div class="scale__button"></div>
            </div>
          </div>
          <p class="about__text text about__text--active">2010 <strong>Производственно-Коммерческая Фирма</strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
          <p class="about__text text">2011 <strong>Производственно-Коммерческая Фирма </strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
          <p class="about__text text">2012 <strong>Производственно-Коммерческая Фирма</strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
          <p class="about__text text">2013 <strong>Производственно-Коммерческая Фирма</strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
          <p class="about__text text">2014 <strong>Производственно-Коммерческая Фирма </strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p>
          <p class="about__text text">2015 <strong>Производственно-Коммерческая Фирма </strong> создана, чтобы закрывать потребности в черном, оцинкованном, цветном и нержавеющем металлопрокате, а так-же трубах, трубопроводной арматуре и грузоподъёмном оборудовании.</p><a class="about__button" href="#"><span>компания</span></a>
        </section>

2
  • 1
    а откуда взялись значения top:5.5px; left:9%?
    – Grundy
    Commented 14 дек. 2020 в 9:31
  • Я так пытался выровнять посередине ::after внутри ::before чтоб максимально поставить в своё место. Но это не получилось. В разных кнопках разъезжается... Commented 14 дек. 2020 в 9:43

1 ответ 1

1

У вас позиционирование, мягко говоря, странно задано. А сдвиг картинки получается из-за того, что браузер-то вычисляет дробные пиксели, но округляет до целого их числа - и округления могут накапливаться однонаправленно, давая в итоге некрасивые результаты.

чтобы отцентрировать что-то гарантированно, нужно использовать более подходящие принципы. В вашем случае, например, достаточно этого:

.scale__button {
  position: relative; 
  height: 24px; /* чтобы было от чего отталкиваться */
}

.scale__block--active .scale__button::before,
.scale__block--active .scale__button::after {
  top: 50%; /* позиционируем строго по центру парента по вертикали */
  left: 50%; /* позиционируем строго по центру парента по горизонтали */
  transform: translate(-50%, -50%); /* сдвигаем влево и вверх строго на половину собственной ширины и высоты */
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.