Html 如何仅使用bootstrap 4在自定义和可调整大小的按钮上居中显示文本_Html_Css_Bootstrap 4

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

html css bootstrap-4

Html 如何仅使用bootstrap 4在自定义和可调整大小的按钮上居中显示文本,html,css,bootstrap-4,Html,Css,Bootstrap 4,我对按钮文本有问题。我自定义了按钮的宽度和高度，当我调整大小时，在调试模式下，在某些屏幕尺寸上，它的文本不再位于中心 Html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>ICT</title> <base href="/"> <meta name="viewport" charset="ut

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

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>

更新

这是我想用html按钮替换图片上的按钮的图片

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

要将按钮上的文本居中放置，请使用

class="text-center"

您需要在.img overlay{}not on按钮上应用“align center”类，然后它将工作

这应该可以做到：将class

文本中心

添加到

按钮

标记的父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>

也可以查看此链接，将引导添加到页面中：

以下是一个大按钮的代码（使用HTML作为基础），该按钮保持在所有设备/屏幕的中心位置。单击下面的“运行代码段”按钮：


试验

添加此按钮的代码、html和css<代码>文本中心应该像类名一样阅读手册，里面有所有的信息。有些人已经投了反对票，因为他们希望你发布代码。在回答与编码相关的问题时，发布您当前的代码是绝对必要的，因为否则所有答案都将基于纯粹的猜测，而您肯定不希望这样。那么，把你当前的代码贴在这里。好的，我正在做that@Ylama请向上投票，我已将代码添加到it@WASIFon在按钮上，我应用了类文本中心。代码更新我认为没有必要添加两次类“文本中心”，因为父级有CenterYes你没有，我只是复制了他的按钮代码，wil Edit，但我使用的是bootstrap 4，但你建议我添加bootstrap 3的引用，请确保你使用的是版本4，因为我没有在你的脑海中看到它，只在标题bootstrap 4中提到过，它在iPad模式下运行良好，但在iPhone8模式下崩溃；（你说的“崩溃”到底是什么意思？它在我这方面非常有效，在所有屏幕和设备上都有效。因此，你这方面似乎有点奇怪，或者你没有使用我在这里发布的确切代码。尝试使用我的确切代码（复制并粘贴所有内容）你会看到它工作没有任何问题。我的意思是说它变得丑陋。文本下降。我复制并替换了我的代码，但仍然没有适当的效果。同样重要的是：请注意，我没有使用任何自定义css。请注意，我没有使用任何自定义css。这是因为我只做了你在问题中要求的事情，没有更多。

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