html - Align elements to the center of another element -
this html:
.hcsi { background-color: #fff; height: auto; width: 100%; text-align: ; position: fixed; left: 0; top: 0; z-index: 0; border: 2px solid #000; border-radius: 25px; } .home, .csgo, .steam, .info { z-index: 1; background-color: rgba(50, 150, 250, 0.5); border: 2px solid #000; padding: 10px 15px; border-radius: 20px; float: center; } .home:hover { background-color: rgba(50, 150, 250, 1); } .hcsi, li { color: #000; padding: 0px; display: inline-block; font-size: 21px; font-weight: 100; letter-spacing: 2.5px; word-spacing: 90px; }
<!doctype html> <html> <head> <title>vusicvoid</title> <link href="https://fonts.google.com/specimen/shrikhand" rel="stylesheet"> </head> <body> <div class="hcsi"> <ul> <a href=""> <li class="home">home</li> </a> <a href="http://store.steampowered.com/app/730/"> <li class="csgo">csgo</li> </a> <a href=""> <li class="steam">steam</li> </a> <a href=""> <li class="info">info</li> </a> </ul> </div> </body> </html>
if put these in code tester, there should 4 blue boxes inside of white 1 problem can't 4 boxes align center of white one. i'm trying padding on sides of blue boxes same.
just fix text-align
make text-align:center;
.hcsi { background-color: #fff; height: auto; width: 100%; text-align:center ; position: fixed; left: 0; top: 0; z-index: 0; border: 2px solid #000; border-radius: 25px; }
Comments
Post a Comment