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;
    }

 }

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

我的HTML

 <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;将文本对齐在中心。

检查以下代码

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

    .subtitle{
    text-align: center;
        }

Answer 2

这是导致问题的原因：

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

删除absolute position，它将正常运作

<强> LIVE DEMO

Answer 3

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

文本未与@media屏幕上的中心对齐（最小宽度：992px）和（最大宽度：1199px）

3 个答案: