Как выровнять среднюю / центральную коробку с текстом в слайдере с отзывчивым в мобильном представлении ??

Я новичок в bootstrap и веб-дизайне .я хочу создать слайдер с мобильным адаптивным, в котором я хочу выровнять текст в поле в середине слайдера, а также это произойдет в адаптивном. так помогите мне решить. Как сделать отзывчивым ??

    i made align center in desktop view but  in mobile view or responsive it won't happen.

Please Note: i am using bx slider here. (screenshot attached)
 Here is my code:

    <header>
        <div class="slider">
            <ul class="bxslider">
                <li><img src="images/slider.jpg" class="slide-img img-responsive"/>
                    <div  class="cap-box">
                        <p class="cap1">AIRFRESHENER</p>
                        <p class="cap2">OUR PRODUCT IS GOOD</p>
                    </div>

                </li>

                <li><img src="images/slider.jpg" class="slide-img img-responsive"/>
                    <div class="cap-box">
                        <p class="cap1">AIRFRESHENER</p>
                        <p class="cap2">OUR PRODUCT IS GOOD</p>
                    </div>
                </li>

                <li><img src="images/slider.jpg" class="slide-img img-responsive"/>
                    <div class="cap-box">
                        <p class="cap1">AIRFRESHENER</p>
                        <p class="cap2">OUR PRODUCT IS GOOD</p>
                    </div>
                </li>

            </ul>
        </div>

CSS file:

.slide-img
{
    width: 100%;
    /*height: 700px;*/
}
.bx-wrapper .bx-viewport
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.bx-viewport {
    position: static!important; /* center to page correctly */
    border: 0!important; /* border */
    -webkit-box-shadow: none!important; /* these two shadows */
    box-shadow: none!important;
}
.cap-box {
    position: absolute;
    margin-left:25%;
    background: rgba(0,0,0,0.5);
    top: 35%;
    width:660px;
    height: 180px;
    display: block;
    padding: 50px 0px;
}
.cap1
{
    font-family: Roboto, Serif;
    font-weight: 700;
    font-size: 36px;
    color: #ea6153;
    text-indent: 65px;
}
.cap2
{
    font-family: Roboto, serif;
    font-weight: 700;
    font-size: 48px;
    text-align: center;
    color: #ffffff;
    line-height: 13px;
}

[![This Screenshot is my desktop view][1]][1]
[![This is my Mobile view which is not responsive with slider(Airfreshener our product is good)][2]][2]


  [1]: https://i.stack.imgur.com/HpK0Y.jpg
  [2]: https://i.stack.imgur.com/HR4CH.png

1 ответ

  1. Проверьте эти и играть со значениями в соответствии с вашими потребностями. Изменения есть только в css.

    
     .слайд-img {
     ширина: 100%;
     }
    
     .bxslider li {
     положение: относительное;
     }
    
     .колпачок-коробка {
     положение: Абсолют;
     слева: 50%;
     топ: 50%;
     transform: translate(-50%, -50%);
     прокладка: 50px;
     ширина: 80%;
     высота: 30%;
     фон: rgba (0, 0, 0, 0.5);
     }
    
     .cap1 {
     шрифт-семья: Roboto, Serif;
     шрифт-вес: 700;
     размер шрифта: 3.5 vw;
     линия-высота: 0.5;
     цвет: #ea6153;
     текст-отступ: 20px;
     }
    
     .cap2 {
     шрифт-семья: Roboto, serif;
     шрифт-вес: 700;
     размер шрифта: 4.5 vw;
     высота линии: 1;
     цвет: #ffffff;
     }