0

Есть фрагмент кода

            <div className="bg">
                    <div className="row justify-content-center row-enter">
                        <form className="enter justify-content-center">

                        </form>
                    </div>
                <div className="text">
                    <h3 id='powered-by'>Powered by</h3>
                    <h3 id='uni-groups'>Company</h3>
                </div>
            </div>

У этих элементов есть следующие свойства:

.bg {
/* The image used */
background-image: url("img/BG.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.enter {
    width: 435px;
    height: 477px;
    margin-top: 10%;
    background-color: white;
    border-radius: 5px;
    text-align: center;
    max-width: 445px !important;
}

.text {
    height: 30px;
    width: 200px;
    margin: auto 0 0 auto;
}

Все остальное - обычные стили бутстрапа 4.
Не могу разместить div с классом text в нижнем правом углу так, чтобы он всегда был в этой позиции при изменении размеров окна.
Конкретно проблема состоит в том, что этот стиль:

.text {
    margin-top: auto;
}

почему-то не применяется.

Проблема с неработающим верхним margin: auto

2
  • float:right; попробуйте
    – Oleksandr
    4 апр 2019 в 8:01
  • код пришли страницы, так чтобы его запустить можно было. 4 апр 2019 в 17:40

1 ответ 1

0

margin так не работает, можно попробовать так

.text {
  height: 100px;
  width: 200px;
  margin: auto 0 0 auto;
}

.align-items-center {
  -ms-flex-align: center!important;
  align-items: center!important;
}

.d-flex {
  display: -ms-flexbox!important;
  display: flex!important;
}
<div class="text d-flex align-items-center">
  <div>
    <h3 id='powered-by'>Powered by Company</h3> 
  </div>
</div>

введите сюда описание изображения

Ваш ответ

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

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