Невозможно центрировать кнопку: что мне не хватает? - PullRequest
Новая
       27

Невозможно центрировать кнопку: что мне не хватает?

0 голосов
/ 23 апреля 2019

У меня есть несколько анимированных кнопок на моей странице. Я отошел от этого проекта (и кода в целом) на некоторое время. Существует 12px отступов, которые заставляют гамбургер сдвигаться вправо, создавая ужасно неприровненный вид. Я не сомневаюсь, что это что-то еще дальше в коде, но я просто ищу какое-либо направление на данный момент, потому что кажется, что ничего из того, что я пробую, не работает. Если мне не хватает частей кода, которые помогли бы выяснить, в чем заключается проблема, просто скажите слово, и я укажу, что нужно.

Я бы опубликовал краткий обзор этой проблемы, но мои очки репутации недостаточно высоки ... Тем не менее, инструменты разработчика говорят мне, что это ~ 12px отступов от начальной загрузки. Более конкретно это говорит: 

padding: .25rem .75rem

Мог бы поклясться, если я укажу что-то, что перезаписывает загрузчик ...

Приношу свои извинения, если это полный вопрос noob или задан полностью noob, я никогда раньше не публиковал на stackoverflow. Я пытался найти ответ, но не могу найти ничего, что могло бы помочь.

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

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

.nav-btn {
    width: 50px;
    height: 32px;
    position: relative;
    margin: auto;
    padding: auto;
}

.nav-btn span {
    display: block;
    position: absolute;
    margin: auto;
    padding: auto;
    height: 4px;
    width: 80%;
}

Вот некоторые из HTML, я пытался обрезать столько, сколько мог ... 

<main class="container-fluid">
    <div class="row">
        <aside class="col-md-3">
            <div class="flex-column">
                <button class="navbar-toggler flex-column nav-btn">
                <span></span>
                <span></span>
                <span></span>
                </button>

Мне нужно, чтобы гамбургер выравнивался по вертикали с остальной частью страницы (и под "остальной частью страницы" я подразумеваю "остальную часть aside class = col-md-3 после укладки себя в раздел class = col- md-9 при уменьшении на 768 пикселей по ширине любого экрана ", но TL / DR amiright?). Любая помощь будет принята с благодарностью. Я уверен, что всегда есть лучший способ сделать что-то, так что во что бы то ни стало; всегда есть «лучший» способ сделать что угодно.

...