如何将中间/中心框与滑块中的文本对齐并在移动视图中响应？

Question

我是引导程序和网页设计的新手。我想创建一个具有移动响应的滑块，我想在其中对齐滑块中间的框中的文本，并且它也发生在响应中。所以帮我解决。我怎样才能做出响应？？

    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

Answer 1

检查这些并使用适合您需求的值。更改仅存在于 css 中。

.slide-img { 宽度：100%； } .bxslider li { 位置：相对； } .cap-box { 位置：绝对； 左：50%； 最高：50%； 变换：翻译（-50%，-50%）； 填充：50px； 宽度：80%； 高度：30%； 背景：rgba(0, 0, 0, 0.5); } .cap1 { 字体系列：Roboto、Serif； 字体粗细：700； 字体大小：3.5vw； 行高：0.5； 颜色：#ea6153； 文本缩进：20px； } .cap2 { 字体系列：Roboto，衬线； 字体粗细：700； 字体大小：4.5vw； 行高：1； 颜色：#ffffff； }