css - can't move buttons to the center

Question

I got 3 buttons on my file that work completely fine. But I can't move them from the left corner (just change it to right by switching the float: to right. How can I move them to the center of the page?

function letsstart() {
    alert("lets start button");
}

function aboutus() {
    alert("about us button");
}

function faq() {
    alert("FAQ button");
}

.button {
    float: left;
    margin:20px;
    padding: 40px;
    background-image: linear-gradient(to left top, #9f3a61, #a04270, #a04a7e, #9e538c, #9b5c99);
    border-radius: 35px;
}

<!DOCTYPE html>
<html>
<head>

    <script src="maincode.js"></script>
    <link rel="stylesheet" type="text/css" href="maincode.css" />
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">


    <script src="code.js"></script>
    <title>WebShit</title>

</head>
<body>

    <h1 class="title">Welcome to our website!</h1>

    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel fringilla est ullamcorper eget nulla facilisi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Massa tincidunt nunc pulvinar sapien et ligula. Sed euismod nisi porta lorem. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Ullamcorper dignissim cras tincidunt lobortis. Diam quis enim lobortis scelerisque fermentum.<br> Habitasse platea dictumst quisque sagittis purus sit amet volutpat. Interdum velit euismod in pellentesque massa.</p>

<!--THE PROBLEM IS HERE-->
<div id="but1"> <butoon onclick="letsstart()" class=button> Let's start </button>
</div>
<div id="but2">    <butoon onclick="aboutus()" class=button> About us </button>
</div>
<div id="but3">    <butoon onclick="faq()" class=button> FAQ </button>
</div>






</body>
</html>

Best way to do it is with flex-box. If you want to do it on your way: You should adjust your button class `.button { margin: 20px auto; display: block; width: 100px; padding: 40px; border-radius: 35px; }` You should remove float: left. Add margin: 20px auto; — Predrag Davidovic, Jul 12 '20 at 19:28

k-wasilewski · Answer 1 · 2020-07-12T19:56:07.963

0

To center your buttons, you could make your div wrappers flexboxes and align their content, eg:

#but1, #but2, #but3 {
    display: flex;
    justify-content: center;
}

edited Jul 12 '20 at 19:56

answered Jul 12 '20 at 19:13

k-wasilewski

3,943
4
12
29

or just `div`. no idea what's `` though – Stavm Jul 12 '20 at 19:14
While this code may answer the question, [including an explanation](https://meta.stackexchange.com/q/114762) of how and why this solves the problem would help to improve the quality of your answer. Remember that you are also answering the question for readers in the future, not just the person asking now. – herrbischoff Jul 12 '20 at 19:37

Bhavesh Lohana · Answer 2 · 2020-07-12T19:51:26.260

0

You can do it by,

#but1, #but2, #but3 {
  display: grid;
  place-items: center;
}

or

#but1, #but2, #but3 {
    display: flex;
    justify-content: center;
}

Edit: As pointed out in comments you can put them in a div, add a class like,

HTML

<div class="btn">
   <!--The buttons-->
</div>

CSS

.btn{
   display: flex;
   justify-content: center;
}

Hope this helps.

edited Jul 12 '20 at 19:51

answered Jul 12 '20 at 19:21

Bhavesh Lohana

376
3
5

Both of those work fine but they align the buttons on top of each other (in the middle) instead of next to each other, any chance you have a solution? – Adam Azulay Jul 12 '20 at 19:29
Add to buttons `display: inline-block` property. Give all buttons in HTML class `class="myButtons"` and then in CSS `.myButtons { display: inline-block}` – Predrag Davidovic Jul 12 '20 at 19:36

css - can't move buttons to the center

2 Answers2