Lodius2000 Posted September 19, 2008 Share Posted September 19, 2008 hi, all other mistakes aside, i need to center the list, which contains the purple boxes, and i cant figure it out you will need sampleimg.jpg to preview, put it in the same directory as the code <html> <head><style type="text/css"> body { text-align: center; } div.box { background-color: #ddd; padding: 50px; min-height: 500px; max-height: 700px; min-width: 500px; max-width: 900px; margin: 0 auto; } ul { list-style-type: none; margin: 5px auto; } li { display:inline; } div.bigbox { margin: 0 auto; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; background-color: #fff; text-align: center; } a { float:left; text-decoration:none; color:white; background-color:purple; border-right:1px solid white; padding-top: 5px; padding-left: 10px; padding-right: 10px; border-style: solid; border-width: 5px; border-color: #ddd; } div.boxcenter { margin: 0 auto; } </style> </head> <body> <div class="box"> <div class="bigbox">sample text</div> <br> <div class="boxcenter"><ul> <li><a href=""><img src="sampleimg.jpg"><br>sampletext</a></li> <li><a href=""><img src="sampleimg.jpg"><br>sampletext</a></li> <li><a href=""><img src="sampleimg.jpg"><br>sampletext</a></li> <li><a href=""><img src="sampleimg.jpg"><br>sampletext</a></li> <li><a href=""><img src="sampleimg.jpg"><br>sampletext</a></li> <li><a href=""><img src="sampleimg.jpg"><br>sampletext</a></li> </ul></div> </div> </body> </html> [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
F1Fan Posted September 19, 2008 Share Posted September 19, 2008 You will need to use "text-align: center;" in your CSS. However, keep in mind that this will only center the stuff inside that particular element and will not center the element on the page. Since there are no width attributes, the elements are only as wide as the widest stuff in them, so they won't appear centered on the page. You will have to either add "width: 100%;" to your CSS, or if you want everything on the page centered by default, you could apply the "text-align: center;" to your <body> tag. That will center everything in that element (in this case, the whole body). Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted September 19, 2008 Share Posted September 19, 2008 You will need to use "text-align: center;" in your CSS. However, keep in mind that this will only center the stuff inside that particular element and will not center the element on the page. Since there are no width attributes, the elements are only as wide as the widest stuff in them, so they won't appear centered on the page. You will have to either add "width: 100%;" to your CSS, or if you want everything on the page centered by default, you could apply the "text-align: center;" to your <body> tag. That will center everything in that element (in this case, the whole body). Please disregard this post, as it is outdated in theory. If you would like to center a list, you need to know the size of the list and put a margin: 0 auto; or simply add enough margin to push to the right or left to center it mathematical. If you are using a liquid design, it is much harder! Quote Link to comment Share on other sites More sharing options...
ifubad Posted September 22, 2008 Share Posted September 22, 2008 if trying to center a horizontal menu to a container or the canvas, there r 2 ways to do it, this is one way I know of (if I recall correctly). I used border mainly so that you can see how it works. This may cause a horizontal scrollbar to appear, one way to workaround that is use overflow:hidden body, html { margin: 0; padding: 0; } #mainContainer { width: 400px; margin: auto; border: 2px solid black; overflow: hidden; } #listContainer { float: left; position: relative; left: 50%; } ul { position: relative; left: -50%; list-style: none; margin: 0; padding: 0; border: 2px solid red; } li { float: left; position: relative; /*need this position for <li> mainly for IE6, and maybe 7, to center correctly(IE SUX)*/ } <div id="mainContainer"> <div id="listContainer"> <ul> <li>Link1</li> <li>Link2</li> </ul> </div> </div> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.