如何确保按钮在不同计算机分辨率下居中显示
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>
您可以尝试将相对定位
position: relative
添加到父级<div>
,然后将绝对定位position: absolute
添加到按钮,并加上left: 50%; top: 50%; transform: translate(-50%, -50%);
。这样,按钮的位置将独立于分辨率和屏幕大小。希望能够解决您的问题。