Почему мой контент не центрируется при просмотре скриншотов, выводимых Wraith? - PullRequest
Новая
       71

Почему мой контент не центрируется при просмотре скриншотов, выводимых Wraith?

0 голосов
/ 11 октября 2019

Я столкнулся с необычной проблемой при использовании Wraith. https://github.com/BBC-News/wraith

Разметка ниже предназначена для центрирования элемента .heading. Он работает по центру в браузерах Chrome, Firefox и Safari.

Мой HTML: 

    <section class="design-intro">
        <div class="container">
            <div class="grid center-xs">
                <div class="heading">
                    <div class="content">
                    <h2>Lorem ipsum dolor sit amet.</h2>
                    <h3>Quisque massa nisi, varius ut sapien quis, pellentesque sodales mauris. Nullam ornare,&nbsp;leo</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

Мой SCSS: 

.design-intro {
    padding: 250px 0;
    background-color: #34353A;

    .heading {
        position: absolute;
        top: 50px;
        z-index: 2;
    }
}

Ниже приведен скриншот раздела, отображаемого в браузере. enter image description here При съемке с экрана вышеупомянутого html / css с использованием Wraith, .heading div неправильно выровнен. Кажется, ведет себя так, как будто он установлен на right: 0;. Даже если я изменю свой CSS на right: auto; left: auto;, он останется не выровненным.

Ниже приведен скриншот, который выложен Wraith. Разметка идентична. enter image description here

Действительно необычная вещь и суть этого вопроса;если элемент .heading отцентрирован по левому краю и переведен, см. ниже: 

    .heading {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
        z-index: 2;
    }

Все скриншоты получаются, как и ожидалось.

Кто-нибудь знает, почему это происходит?

Это не проблема, которую я не могу обойти, я хотел бы понять, почему это происходит, поэтому я могу объяснить это своим коллегам.

Это не только специфическая проблема Wraith, посколькуЯ видел в Интернете: https://codersblock.com/blog/centering-codepen-screenshots/

К сожалению, не так много людей спрашивают об этом, поэтому не так много я могу найти в Google, возможно, я не ищу правильные условия поиска.

Спасибо за вашу помощь, она очень ценится
Спасибо
Мое

...