如何仅用Bootstrap 4实现自定义可缩放按钮的文本居中？

Let's break down why your button text loses alignment when scaling, and how to fix it while ensuring the HTML button properly replaces the image-based one:

Root Cause #

The main issue is your fixed line-height: 20px on .testButton. Since your button's height is tied to the parent .img-overlay (which uses a percentage height), this fixed line height won't adjust as the button scales—breaking vertical centering. While text-center handles horizontal alignment, vertical alignment wasn't set up for responsive scaling.

Solution #

We'll use flexbox to handle both horizontal and vertical centering reliably, and tweak the CSS to ensure the button perfectly matches the original image button's dimensions:

Updated HTML #

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ICT</title>
<base href="/">
<meta name="viewport" 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 testButton"> TEST </button>
</div>
</div>
</div>
</div>
</body>
</html>

(Note: I removed the duplicate charset="utf-8" from the viewport meta tag—it only needs to be declared once)

Updated CSS #

.img-wrapper { position: relative; }
.img-overlay { position: absolute; bottom: 31%; left: 13.5%; width: 34%; height: 4%; }
.testButton { 
  font-size: 3vw; 
  /* Use flexbox for consistent centering */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* Optional: Remove default border if you need to match the image button's style */
}
.fill-container { width: 100%; height: 100%; }

Key Changes Explained #

• Removed fixed line-height: Fixed values don't adapt to responsive element heights, which was causing vertical misalignment.
• Added flexbox properties:
  • display: flex converts the button into a flex container
  • align-items: center handles vertical centering of the text
  • justify-content: center ensures horizontal centering (you can even remove the text-center class now, since flexbox covers this)
• Cleaned up meta tag: Removed duplicate charset declaration to avoid potential rendering issues.

Verification #

Test by scaling your browser window or using device emulation in dev tools—your button text should stay perfectly centered regardless of screen size, and the HTML button will fully occupy the .img-overlay container, matching the original image button's position and dimensions.

内容的提问来源于stack exchange，提问作者WasiF