css - 如何在按钮中居中文本?
问题描述
我需要×
在我的按钮中居中。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.modal-default-close {
margin: 0;
position: absolute;
top: 130px;
right: 48%;
width: 30px;
height: 30px;
border-radius: 23px;
background-color: #898A8F;
color: #ffffff;
font-size: 40px;
opacity: 1;
z-index: 10;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<button type="button" class="btn modal-default-close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</body>
</html>
解决方案
给它加一个否定margin-top
词。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.modal-default-close {
margin: 0;
position: absolute;
top: 130px;
right: 48%;
width: 30px;
height: 30px;
border-radius: 23px;
background-color: #898A8F;
color: #ffffff;
font-size: 40px;
opacity: 1;
z-index: 10;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.btn>span{ margin-top:-0.21em}
</style>
</head>
<body>
<button type="button" class="btn modal-default-close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
</body>
</html>
推荐阅读
- c# - 如何加快批量静音/取消静音用户?
- powershell - Invoke-Restmethod 编码问题
- reactjs - 如何添加对 HTMLCollection 项目的反应引用?
- git - 无论如何在SourceTree UI中压缩和合并?
- r - 在 RStudio 中使用不同版本的 R 完全独立
- sql - 从数组 Google SQL 中提取数据
- elasticsearch - 字段数据缓存统计 - Elasticsearch
- python - 尝试运行使用 pip 安装的软件包时在“C:\\Users\\Office”中找不到“__main__”模块
- python - 带有scrapy和查询字符串参数的网页抓取动态网站
- amazon-web-services - 为什么解析不返回json?