Как использовать дисплей: правильно блокировать кнопки css?

Question

Когда я использую display: block , он не хочет работать, который работал раньше. Когда я проверяю, на экране отображается мой удар: блок . Теперь кнопки расположены справа от столбца, их нужно расположить посередине под изображением.

html

<div class="sectionLight">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-12 col-lg-4">
                    <img class="img-fluid imgCenter" src="images/square.png">
                    <div class="row">
                        <div class="col-sm-12">
                            <button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".square-modal-lg">Prime</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-4">
                    <img class="img-fluid imgCenter" src="images/fibo.png">
                    <div class="row">
                        <div class="col-sm-12">
                            <button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".fibo-modal-lg">Fibo</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-4">
                    <img class="img-fluid imgCenter" src="images/square_copy.png">
                    <div class="row">
                        <div class="col-sm-12">
                            <button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".prime-modal-lg">Square</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.btnCenter {
    display: block;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 20px;
    width: 50%;

}

Answer 1

Возможно, вы включили еще один css скрипт, который перезаписывает ваш текущий.

Вы можете попробовать сделать его !important. Если это не работает, вам, возможно, придется сделать ваш селектор более spesifi c, чем тот, который в настоящее время перезаписывает его.

.btnCenter {
  display: block !important;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  width: 50%;
}

Вы можете отладить это в инструментах разработчика. См. Пример изображения ниже:

В этом примере первичный. css выше в иерархии css (то есть файл primary.css включен позже, чем stacks.css) Поэтому он перезапишет селектор.