How do I align a button to the right?-CodePudding

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;

CSS:

#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 align="right">
            <button class="flex" id="hideShow" onclick="hideBtTS()">Hide</button>
        </div>
        </div>
    <div id="dividers">
        <hr><br><br>
    </div>
</body>
</html>

EDIT: Worked in example but not in main code, added more code for context

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

Use:

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

Adjust bottom: ; to whatever you need.

This worked for me.

CodePudding user response：

try this

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