如何确保按钮在不同计算机分辨率下居中显示
P粉974462439
2023-08-13 18:51:08
<p>移动分辨率</p>
<p>所以我正在使用bootstrap，并成功将其居中，但当我改变分辨率/缩小它时，按钮换行并稍微向右移动了一点，有人可以告诉我我做错了什么吗？</p>
<pre class="brush:php;toolbar:false;">--HTML--
<div class="d-grid gap-2 col-2 mx-auto text-center">
<button id="Get" class="btn btn-outline-success btn-lg" type="button">最新上传</button> </div>
--CSS--
#Get {
border-width: 4px;
font-family: Lexend;
}</pre>
<p>我试图将其居中，对于较大的分辨率可以工作，但在移动分辨率上向左移动了</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您可以尝试将相对定位
position: relative添加到父级<div>，然后将绝对定位position: absolute添加到按钮，并加上left: 50%; top: 50%; transform: translate(-50%, -50%);。这样，按钮的位置将独立于分辨率和屏幕大小。希望能够解决您的问题。
#Get { border-width: 4px; font-family: Lexend; margin: 0 auto; }<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="d-grid gap-2 mx-auto text-center"> <button id="Get" class="btn btn-outline-success btn-lg" type="button">最新上传</button> </div>