centering a button in my menubar - html

Question

I'm trying to align a button so that it stays in the center of my menu bar. The jsfiddle will show you what I mean.
this does not seem to work:
vertical-align: middle;
Here is the code: jsfiddle!

Answer 1

Unfortunately, vertical aligning is one of the tougher things to do in HTML/CSS, depending on the situation.
However, if you not want to use absolute heights and must have it vertically centered, you can always changed the display to table, instead of block: display: table;
I edited your original jsfiddle for a working example.
I added /* Comments */ where I either added or changed CSS.

Answer 2

save yourself some time and try to use bootstrap.
here is the css you can use :
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
but you can find a complete detailed solutions if you take a little time and go to this link :
https://css-tricks.com/centering-css-complete-guide/

Answer 3

Add below to your handle class
https://jsfiddle.net/420qk42v/2/
text-align:center;

Answer 4

.handle {
width: 100%;
background-color: #ffe2e2;
font-family: "century gothic";
opacity: 0.9;
box-sizing: border-box;
padding: 10px 5px;
cursor: pointer;
display: block;
text-align: center; /* this is the change */
}
Is that what you meant?

Answer 5

I did a test with the vertical align and it works if you remove the absolute positioning on the menu button.
I also made a new div around the text "menu" and then set that to position absolute while setting the handle to align the text to the right - the button will only move the right.
HTML
</br>
</br>
</br>
<nav>
<div>
<div class="handle">
<!--<div class="heading">MENU</div>-->
<!-- Menu button if on mobile device -->
<a class="menu">
<span class="line"></span>
</a>
</div>
</div>
</nav>
CSS
.handle {
width: 100%;
background-color: #ffe2e2;
font-family: "century gothic";
opacity: 0.9;
box-sizing: border-box;
padding: 10px 10px;
cursor: pointer;
display: block;
text-align: right;
}
/*added class for the menu - the heading text*/
.heading {
/*This is commented out in the markup but is to keep the menu heading on the right*/
position: absolute;
}
.menu {
border-radius: 3px;
border: 1px solid #ccc;
color: #5f5f5f;
font-weight: bold;
display: inline-block;
width: 1.9em;
vertical-align: middle;
height: 1.75em;
padding: 2px 0 0 0;
box-sizing: border-box;
}
.menu:hover {
/* background-image: linear-gradient(#e63d44,#c11a22);*/
/*box-shadow: 0 1px 3px 0 rgba(0,0,0,0.22);*/
}
.menu .line {
background: rgb(184,184,184);
border-radius: 2px;
box-shadow: 0 5px 0 0 rgb(184, 184, 184), 0 -5px 0 0 rgb(184, 184, 184);
display: block;
margin: 10px auto 0 auto;
height: 3px;
width: 16px;
content: " ";
overflow: visible;
}
.menu:hover .line {
background: rgb(255,255,255);
box-shadow: 0 5px 0 0 rgb(255,255,255), 0 -5px 0 0 rgb(255,255,255);
}
Js fiddle to test - https://jsfiddle.net/ToreanJoel/b7mgaasj/