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> Link to comment https://forums.phpfreaks.com/topic/286235-center-a-div-tag/ 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? Link to comment https://forums.phpfreaks.com/topic/286235-center-a-div-tag/#findComment-1469144 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 Link to comment https://forums.phpfreaks.com/topic/286235-center-a-div-tag/#findComment-1469146 Share on other sites More sharing options...
Ch0cu3r Posted February 16, 2014 Share Posted February 16, 2014 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/ Link to comment https://forums.phpfreaks.com/topic/286235-center-a-div-tag/#findComment-1469152 Share on other sites More sharing options...
spudly1987 Posted February 17, 2014 Author 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 Link to comment https://forums.phpfreaks.com/topic/286235-center-a-div-tag/#findComment-1469232 Share on other sites More sharing options...
josh1600 Posted February 19, 2014 Share Posted February 19, 2014 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> Link to comment https://forums.phpfreaks.com/topic/286235-center-a-div-tag/#findComment-1469502 Share on other sites More sharing options...
Strider64 Posted February 21, 2014 Share Posted February 21, 2014 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> Link to comment https://forums.phpfreaks.com/topic/286235-center-a-div-tag/#findComment-1469875 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.