html - Can't move text button -
i'm creating menu header background image. created text button (the green aphryv thing) can't move it. tried: margin, text-align. can see box , want it.
my code :
.full-header { width: 100%; height: 500px; background: url(img/header-bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .header { width: 100%; height: 60px; background: rgba(0, 0, 0, 0.45); } .nav { text-align: center; } .nav ul li { display: inline; padding: 20px 10px; line-height: 55px; } .nav ul li { text-decoration: none; color: #fff; font-family: 'source sans pro', arial, sans-serif; font-size: 35px; } .button { font-family: arial; color: #ffffff; font-size: 30px; background: #8edd63; padding: 10px 20px 10px 20px; text-decoration: none; display: inline-block; text-align: center; }
<div class="full-header"> <div class="header"> <div class="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">work</a></li> <li><a href="#">about me</a></li> <li><a href="#">contact</a></li> </ul> </div> </div> <div class="button">aphryv</div> </div>
the problem code:
display: inline-block;
you need remove it, give text width, , use margins position it.
example: https://jsfiddle.net/nc5jfd2c/
Comments
Post a Comment