Question 228422 in Html Question posted in
Some basic documentation can be found here.

Html – How to center this button even though it's already centered in Computer resolution

Mobile Resolution

So I’m using bootstrap and managed to center it but when I changed my resoluton/make it smaller the button wrapped and moved to the right a bit, Can anyone tell me what did I do wrong with it?

--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">Newest Upload</button> </div>

--CSS--
#Get {
    border-width: 4px;
    font-family: Lexend;
}

I tried to center it and it worked on bigger resolution but moved to the left when it’s on mobile resolution

Tags:

2

Answers


  1. 0

    You can try adding relative positioning position: relative to the parent <div>, and then add absolute positioning position: absolute to the button, along with left: 50%; top: 50%; transform: translate(-50%, -50%);.

    This way, the position of the button will be independent of the resolution and screen size.Hope to be able to solve your problem.

    Login or Signup to reply.
  2. 0 
    #Get {
    border-width: 4px;
    font-family: Lexend;
    margin: 0 auto;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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">Newest Upload</button> </div>

    To fix this, you can use the mx-auto class to center the button horizontally, regardless of the width of the columns. Here is the updated HTML code:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search