How do I align a button to the right?

Question

How would I align a button to the right?

I've tried text-align: right; and align-content: right;

I would also like the button have display: flex;

#hideShow {
  display: flex;
  text-align: right;
  align-content: right;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<button class="flex" id="hideShow" onclick="hideBtTS()">Hide</button>

Does this answer your question? [Place a button right aligned](https://stackoverflow.com/questions/6632340/place-a-button-right-aligned) — Roy, Nov 17 '21 at 13:08

score 2 · Answer 1 · answered Nov 17 '21 at 13:29

2

You should have flex on your parent div. Also, you can try using { display: flex; justify-content: flex-end; }

justify-content will align your button with the end of your parent div (right side of the window).

answered Nov 17 '21 at 13:29

Zerina Fazlagic

96
1

score 0 · Answer 2 · answered Nov 17 '21 at 13:13

You can use margin-left: auto, but you have to display it as a block as follows -

#hideShow {
display: block;
margin-left: auto;
}

If you want it at centre then also add margin-right: auto as follows -

#hideShow {
display: block;
margin-left: auto;
margin-right: auto;
}

Pradeep Singh · Answer 3 · 2021-11-17T13:30:51.920

0

Here I am assuming that your button container is 100% width.

CSS:

.btn-container {
    display:flex;
    justify-content:flex-end
}
//#hideShow {
//    display: flex;
//    text-align: right;
//    align-content: right;
//}

HTML:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="flex">
    <form action="../index.html" id="BtTS">
        <input type="submit" value="<--- Back to Title Screen" />
    </form>
    <div class="btn-container" align="right">
        <button class="flex" id="hideShow" onclick="hideBtTS()">Hide</button>
    </div>
    </div>
<div id="dividers">
    <hr><br><br>
</div>
</body>
</html>

check the result here

edited Nov 17 '21 at 13:30

answered Nov 17 '21 at 13:16

Pradeep Singh

1
2

Hmm, it doesn't work in my main code, could you take a look? HTML: https://pastebin.com/4HmVuZJL CSS: https://pastebin.com/zR6C4z1u – Atramentis Nov 17 '21 at 13:41
just add width:100% to btn-container class like this https://jsfiddle.net/bh1e6yvt/2/ – Pradeep Singh Nov 17 '21 at 16:44
however this one is more elegant solution: https://jsfiddle.net/bh1e6yvt/4/ – Pradeep Singh Nov 17 '21 at 16:47

score 0 · Answer 4 · answered Nov 17 '21 at 13:22

0

You are doing changes on the text inside the button. You have to put "text-align: right" to the container not the button

#right {
  text-align: right;
}

answered Nov 17 '21 at 13:22

djadweb

29
2

didn't work for me... Could you look at my code? https://pastebin.com/ka1cRxht – Atramentis Nov 17 '21 at 13:33
1

I see.. Just add "justify-content: space-between". check this out https://jsfiddle.net/cpm2v9ts/ – djadweb Nov 17 '21 at 14:05
Thank you very much but I found another way! :) – Atramentis Nov 17 '21 at 14:14

score 0 · Answer 5 · answered Nov 17 '21 at 14:18

0

Use:

.btn-container {
   justify-content: flex-end;
   position: relative;
   bottom: 38px;
}

Adjust bottom: ; to whatever you need.

This worked for me.

answered Nov 17 '21 at 14:18

Atramentis

81
10

score 0 · Answer 6 · answered Nov 17 '21 at 17:03

0

try this

.flex{
 display: flex;
 justify-content: space-between!important;
}

answered Nov 17 '21 at 17:03

Osman Rafi

938
1
16
37

How do I align a button to the right?

6 Answers6