如何在 bootstrap4 或 css 的不同屏幕中将文本居中放在按钮上

Question

我对按钮文本有疑问。当我调整大小时，它的文本不再像这些图像那样在某些屏幕尺寸的中心位置。

在iPad中，很好

在iPhone中，它是丑陋的，不是居中的位置

HTML

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12">
    <div @fade class="img-wrapper">
      <img [src]="imgPath" class="img-fluid">
      <div class="img-overlay">
        <button routerLink="/test" 
                class="btn btn-success fill-container testButton">
                TEST
        </button>
      </div>
    </div>
  </div>
</div>

CSS

.img-wrapper {
    position: relative;
}

.img-overlay {
    position: absolute;
    bottom: 31%;
    left: 13.5%;

    width: 34%;
    height: 4%;
    background-color: red;
}

.testButton {
    font-size: 3vw;
    line-height: 20px;
}
.fill-container {
    width: 100%;
    height: 100%;
}

请让我知道我应该怎样做才能做对。

问候

Answer 1

解决方案很简单：如果您不尝试通过应用破坏它们的自定义 css 来阻止本机 Bootstrap 4 类的工作，那么添加 text-center 类就足够了。

这是一个代码 sn-p，它显示了这个类完美地完成了它的工作：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div @fade class="img-wrapper">
                <img [src]="imgPath" class="img-fluid">
                <div class="img-overlay text-center">
                    <button routerLink="/test" 
                            class="btn btn-success fill-container testButton">
                        TEST
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

但是，如果您开始添加破坏 Bootstrap 的 css hack，那么当然，您将需要更多 css hack 来解决由原始 css hack 引起的问题。

在这种情况下，我建议回到第一方，删除所有自定义 css 并使用本机 Bootstrap 4 类来完成您需要的工作，因为本机 Bootstrap 4 类几乎可以完成您在布局方面需要的一切.无需任何 css hack。