html - horizontal centering 4 Div's inside a Div -
i need create small portfolio school, @ top want create menu 4 categories (see picture).
http://fs5.directupload.net/images/160206/ixtj8mtk.jpg
basically have created "main" div (100% width) , inside main div created 4 boxes, need put 4 divs next each other , center them inside main div, can't work, atm centered 4 divs on top of each other instead of left/right each other.
.mainmenu { background-color: grey; width: 100%; margin: 0; min-height: 50px; float: left; } .mainbox { background-color: grey; width: 100px; margin: 0 auto; min-height: 30px; float: none; } @media screen , (max-width: 800px) { .mainbox { background-color: #daba11; width: 200px; font-style: italic; } }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>portfolio</title> <link rel="stylesheet" href="style.css"> </head> <body style="text-align: center;"> <div class="mainmenu"> <div class="mainbox"> </div> <div class="mainbox"> </div> <div class="mainbox"> when </div> <div class="mainbox"> why </div> </div> </body> </html>
see fiddle
see code here
change css bit follows
.mainmenu { background-color: grey; width: 100%; margin: 0; min-height: 50px; text-align: center; } .mainbox { background-color: grey; width: 100px; margin: 0 auto; min-height: 30px; float: none; display:inline-block; } by default, div has display:block style forces divs new line.thus, have done is, added text-align: center; instead of float:left .mainmenu , added display:inline-block; .mainbox forces divs inline.
Comments
Post a Comment