文本不与屏幕中心对齐@media(最小宽度:992px)和(最大宽度:1199px)

Question

滑块的标题和副标题未居中对齐，在其他屏幕尺寸上工作正常，但在此屏幕尺寸中，标题和副标题向左浮动

 @media screen and (min-width:992px) and (max-width:1199px) {
    .position{
      position: absolute;
      padding-top: 240px;
    }
    .swiper-slide{
     text-transform: uppercase;
     letter-spacing: 3px;
     font-size: 60px;
     line-height: 79px!important;
     color: #fff;
    }
    .subtitle{
    font-family: 'Rouge Script', cursive;
    font-size: 40px;
    line-height: 39px!important;
    font-weight: 400;
    color: #fff;
    font-style: italic;
    }
 }

我正在使用文本中心引导类来对齐文本

我的网页

 <div class="item text-center">
      <div class="position col-lg-12">
        <h1 class="swiper-slide">
          <strong>
            welcome to the shop
          </strong>
        </h1>
        <p class="subtitle">
          <span>
            Take your time looking around & don't be shy
          </span>
        </p>
        <p class="top-space">
          <button type="button" class="btn btn-default btn-lg button hvr-float-shadow" id="focus">
            START BROWSING
          </button>
        </p>
      </div>
      <img src="img/front_girl1.jpg">
    </div>

Answer 1

使用 text-align：center;将在 center 中对齐文本。

检查下面的代码

  .swiper-slide{
    text-align: center;
    }
    .subtitle{
    text-align: center;
        }

Answer 2

这是导致问题的原因：

.position{
      position: absolute;
      padding-top: 240px;
    }

删除absolute position，它将正常工作

现场演示

Answer 3

无论定位上下文如何，它都应该有效。您应该检查特异性和显示类型（如果元素设置为display:inline，则文本对齐将不直接应用于该元素）。没有现场演示很难说。你能提供更多代码或完整的小提琴吗？