Eu peguei esse menu no seguinte site: Left Slide Menu with Icon, e gostaria de centraliza-lo no meu blogger. Ele ficava em pre, consigo coloca-lo na parte de baixo do blog, mas queria ele no centro da pagina. Como posso centralizá-lo?
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");
.menu,
.menu-bar {
position: fixed;
bottom: 0;
left: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #f7f7f7;
z-index: 10;
overflow: hidden;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li a {
display: inline-block;
text-indent: -500em;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #72739f;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.1s ease-in-out;
}
.menu li a:before {
font-family: FontAwesome;
speak: none;
text-indent: 0em;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
}
.menu li a.search:before {
content: "\f002";
}
.menu li a.archive:before {
content: "\f187";
}
.menu li a.pencil:before {
content: "\f040";
}
.menu li a.contact:before {
content: "\f003";
}
.menu li a.about:before {
content: "\f007";
}
.menu li a.home:before {
content: "\f039";
}
.menu-bar li a:hover,
.menu li a:hover,
.menu li:first-child a {
background: #267fdd;
color: #fff;
}
.menu-bar {
overflow: hidden;
left: 5em;
z-index: 5;
width: 0;
height: 0;
transition: all 0.1s ease-in-out;
}
.menu-bar li a {
display: block;
height: 4em;
line-height: 4em;
text-align: center;
color: #72739f;
text-decoration: none;
position: relative;
font-family: verdana;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.1s ease-in-out;
}
.menu-bar li:first-child a {
height: 5em;
background: #267fdd;
color: #fff;
line-height: 5
}
.para {
color: #033f72;
padding-left: 100px;
font-size: 3em;
margin-bottom: 20px;
}
.open {
width: 10em;
height: 100%;
}
@media all and (max-width: 500px) {
.container {
margin-top: 100px;
}
.menu {
height: 5em;
width: 100%;
}
.menu li {
display: inline-block;
}
.menu-bar li a {
width: 100%;
}
.menu-bar {
width: 100%;
left: 0;
bottom: 0;
height: 0;
}
.open {
width: 100%;
height: auto;
}
.para {
padding-left: 5px;
}
}
@media screen and (max-height: 34em) {
.menu li,
.menu-bar {
font-size: 70%;
}
}
@media screen and (max-height: 34em) and (max-width: 500px) {
.menu {
height: 3.5em;
}
}
<ul class="menu">
<li title="home"><a href="#" class="menu-button home">menu</a></li>
<li title="search"><a href="#" class="search">search</a></li>
<li title="pencil"><a href="#" class="pencil">pencil</a></li>
<li title="about"><a href="#" class="active about">about</a></li>
<li title="archive"><a href="#" class="archive">archive</a></li>
<li title="contact"><a href="#" class="contact">contact</a></li>
</ul>
<ul class="menu-bar">
<li><a href="#" class="menu-button">Menu</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Editorial</a></li>
<li><a href="#">About</a></li>
</ul>