I am trying to align the button to the center of the page, (instead of the left side) But here is all i'm getting:
.btn1 {
font-family: 'Roboto Mono', monospace;
font-size: 18px;
font-weight: bold;
background: #1E90FF;
width: 500px;
padding: 20px;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
position: fixed;
bottom: 60%;
justify-content: center;
display: flex;
float: right;
}
.btn1:hover,
.btn1:focus,
.btn1:active {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<button >Show me a note!</button>
CodePudding user response:
By giving button a specific height and width will take the button on the center of the page
.btn1 {
font-family: 'Roboto Mono', monospace;
font-size: 18px;
font-weight: bold;
text-align: center;
background: #1E90FF;
width: 500px;
height: 66px;
text-decoration: none;
color: #fff;
padding: 20px;
border-radius: 5px;
cursor: pointer;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<button >Show me a note!</button>
CodePudding user response:
Check here: http://jsfiddle.net/xjonqa63/4/
#sticky {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
<a id="sticky">Button</a>