Question

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

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按钮的图像，以便它隐藏图像按钮。

Answer 1

将文本置于按钮中心：使用

class="text-center"

Answer 2

这应该可以解决问题：将类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

Answer 3

这里是代码（使用HTML作为基础），用于保留所有设备/屏幕中心的大按钮。点击＆＃34;运行代码段＆＃34;按钮如下：

＆＃13;

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

＆＃13;

Answer 4

您需要在.img-overlay {}上应用“对齐中心”类而不是按钮然后它才能正常工作

如何仅使用bootstrap 4将文本置于自定义和可调整大小的按钮上

4 个答案: