如何确保按钮在不同计算机分辨率下居中显示-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何确保按钮在不同计算机分辨率下居中显示

P粉974462439 2023-08-13 18:51:08

[CSS3讨论组]

973

<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>

P粉974462439

全部回复(2)

P粉2783794952023-08-14 16:13:14 2楼

您可以尝试将相对定位 position: relative 添加到父级 <div>，然后将绝对定位 position: absolute 添加到按钮，并加上 left: 50%; top: 50%; transform: translate(-50%, -50%);。

这样，按钮的位置将独立于分辨率和屏幕大小。希望能够解决您的问题。

赞 +0

添加回复

P粉6383439952023-08-14 13:13:40 1楼

#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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>