I am encountering an issue with button text alignment. After customizing the width and height of a button, I noticed that its text does not remain centered on certain screen sizes while in debugging mode.
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%;
}
Update
An image has been provided showing the desired placement for an HTML button to replace the button on the image:
https://i.sstatic.net/obkol.png
Please review the image for reference as I aim to add an HTML button with identical dimensions to cover the image button effectively.