如何仅使用 bootstrap 4 将文本居中在自定义和可调整大小的按钮上答案

【问题标题】：How to center text on customized and resizeable button using bootstrap 4 only如何仅使用 bootstrap 4 将文本居中在自定义和可调整大小的按钮上
【发布时间】：2018-07-07 23:01:08
【问题描述】：

我对按钮文本有疑问。我自定义了按钮的宽度和高度，当我调整大小时，在调试模式下，它的文本在某些屏幕尺寸上不再居中。

HTML

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>ICT</title>
  <base href="/">

  <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body class="container-fluid">
  <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 text-center testButton">
                TEST
        </button>
      </div>
    </div>
  </div>
</div>
</body>

</html>

CSS

.img-wrapper {
    position: relative;
}

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

    width: 34%;
    height: 4%;
}

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

更新

这是我希望用 html 按钮替换图像上的按钮的图像

请看一下我已经添加了我想要在其上放置具有相同宽度和高度的 html 按钮的图像，以便它隐藏图像按钮。

【问题讨论】：

为这个按钮添加代码，html和css。 text-center 应该作为类名
阅读手册，里面有所有信息
有些人已经在投票了，因为他们希望您发布代码。在回答与编码相关的问题时，发布您当前的代码是绝对必要的，否则所有答案都将基于纯粹的猜测，而您当然不希望这样。因此，请在此处发布您当前的代码。
好的，我正在这样做
@Ylama 请投票，我已经添加了代码

标签： html css bootstrap-4

【解决方案1】：

要使按钮上的文本居中：使用

class="text-center"

【讨论】：

@WASIFon 你应用了哪个元素 Text align ?
在一个按钮上，我应用了类文本中心。代码更新

【解决方案2】：

您需要在 .img-overlay {} 上而不是在 Button 上应用“align-center”类，然后它才会起作用

【讨论】：

【解决方案3】：

这应该可以解决问题：将 text-center 类添加到 button 标记的父 div。

<div class="row">
<div class="col-sm-12">
 <div class="text-center">
  <button routerLink="/test" class="btn btn-success">TEST</button>
 </div>
</div>
</div>

还要确保在 head 标记中包含 Bootdtrap V4。

<head>
 <meta charset="utf-8">
 <title>ICT</title>
 <base href="/">

 <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

也请查看此链接，将引导程序添加到您的页面：click me

【讨论】：

我认为不需要添加类“text-center”两次，因为父级有中心
是的，你不是我只是复制了他的按钮代码，将编辑
但是我用的是bootstrap 4，但是你建议我添加bootstrap 3的引用
抱歉，请确保您使用的是该版本 4，因为我没有在您的 head 标签中看到它
仅在标题 bootstrap 4 中提及

【解决方案4】：

这里是一个大按钮的代码（以您的 HTML 为基础），该按钮位于所有设备/屏幕的中心。点击下方“运行代码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-fluid">
    <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-lg btn-success fill-container text-center testButton" style="width: 34%;">
                        TEST
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

它在 iPad 模式下运行良好，但在 iPhone 8 模式下崩溃；(
“崩溃”到底是什么意思？它在我身边完美运行，它适用于所有屏幕和设备。所以，这对你来说似乎有些特殊，或者你没有使用我在这里发布的确切代码。尝试使用我的确切代码（复制并粘贴所有内容），您会看到它没有任何问题。
我的意思是它变得丑陋了。文本下降。我复制并替换为我的代码，但仍然没有正确的效果
同样重要：请注意我没有使用您的任何自定义 css。
请注意，我没有使用您的任何自定义 css。那是因为我只是在做你在问题中提出的问题，而不是更多。