html - Trouble Centering -
i'm developing webpage , followed tutorial "https://www.youtube.com/watch?v=1tdrozm__k0". thing trying change centering text. , i've haven't been able right. it's been close, ocd won't allow it. appreciated.
thanks
body { width: 100%; margin: auto; font-family: helvetica; } .header { background: #383838; width: 100%; top: 0; position: fixed; } .container { width: 960px; margin: 0 auto; } .logo { float: center; font-size: 15; color: white; }
<doctype html> <html> <head> <title>website</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <!-- ignore this! livereload --> <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> <!-- ignore this! livereload --> <div class="header"> <div class="container"> <div class="logo"> <h1>website</h1> </div> </div> </div> </body> </html>
you have fixed width of container, remove , give text-align:center
.logo
.
check out:
body { width: 100%; margin: auto; font-family: helvetica; } .header { background: #383838; width: 100%; top: 0; position: fixed; } .container { margin: 0 auto; } .logo { float: center; font-size: 15; color: white; text-align:center; // here align center make text center. }
<doctype html> <html> <head> <title>website</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <!-- ignore this! livereload --> <!-- ignore this! livereload --> <div class="header"> <div class="container"> <div class="logo"> <h1>website</h1> </div> </div> </div> </body> </html>
Comments
Post a Comment