spudly1987 Posted February 16, 2014 Share Posted February 16, 2014 I have the following code that I borrowed from w3schools, and what I'm looking to do is center the whole thing horizontally in my page, however I am running into complications any help will be appreciated <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> div.img { margin:5px; padding: 5px; border:1px solid #0000ff; height:auto ; width:auto; float:left; text-align:center; } div.img img { display:inline; margin:5px; border:1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; color:white; font-weight:normal; width:120px; margin:5px; } </style> </head> <body> <h1> This is a test </h1> <p> My name is Vincent <p> <div class="img"> <a target="_self" href="Ashleeyy1.html"> <img src="https://pbs.twimg.com/media/BeJHDUpCYAA6gT-.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Ashleeyy</div> </div> <div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
RaoufOsman Posted February 16, 2014 Share Posted February 16, 2014 If I am understanding correctly all you want to do is make everything line up in the center instead of justifying? Quote Link to comment Share on other sites More sharing options...
spudly1987 Posted February 16, 2014 Author Share Posted February 16, 2014 What I want to be able to do is just center the div which is the boxes with the pictures, and text, the h1 and p text i'm not particularly interested in changing at the moment, just the div and also at some point be able to add another row Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted February 16, 2014 Share Posted February 16, 2014 (edited) wrap everything in div <div id="container"> your page html </div> Now apply a width and auto margins #container { width: 80%; /* webpage width */ margin: 0 auto; /* auto margins, center the content in the middle of the screen */ } Live demo http://jsfiddle.net/cy73q/ Edited February 16, 2014 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
Solution spudly1987 Posted February 17, 2014 Author Solution Share Posted February 17, 2014 Thank you for the information it did work, any chance you can explain to me how to add another row,  Thank you Quote Link to comment Share on other sites More sharing options...
josh1600 Posted February 19, 2014 Share Posted February 19, 2014 (edited) Use the properties to style in center & structure each div: <style type="text/css" rel="stylesheet"> #content{ text-align:center; margin: 0 auto 0 auto; } .itemSetA{ display:inline-block; /* inline to place inline, block for block effect or inline-block for a hybrid display style */ } </style> Also Use single table structures: <div id="content"> <table class="itemSetA"> <tr> <td><YOUR DIV#1 HERE /> </td> </tr> </table> <table class="itemSetA"> <tr> <td><YOUR DIV#2 HERE /> </td> </tr> </table> <table class="itemSetA"> <tr> <td><YOUR DIV#3 HERE /> </td> </tr> </table> </div> Edited February 19, 2014 by josh1600 Quote Link to comment Share on other sites More sharing options...
Strider64 Posted February 21, 2014 Share Posted February 21, 2014 (edited) Personally I would switch from using id to class that way you could do something like this: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> div { display: block; border-bottom: 4px solid #2e2e2e; background-color: orange; padding: 30px; } .container { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; width: 100%; max-width: 940px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .container:after { clear: both; } .container:before, .container:after { content: " "; display: table; } .row { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; } .row:after { clear: both; } .row:before, .row:after { content: " "; display: table; } </style> </head> <body> <div class="container">Row 1</div> <div class="container row">Row 2</div> </body> </html> Edited February 21, 2014 by Strider64 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.