Jump to content


Photo

center a div tag


Best Answer spudly1987, 17 February 2014 - 08:10 AM

Thank you for the information it did work, any chance you can explain to me how to add another row, 

 

Thank you

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 16 February 2014 - 12:55 PM

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>


#2 RaoufOsman

RaoufOsman

    Newbie

  • New Members
  • Pip
  • 5 posts

Posted 16 February 2014 - 01:18 PM

If I am understanding correctly all you want to do is make everything line up in the center instead of justifying?

#3 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 16 February 2014 - 01:21 PM

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 



#4 Ch0cu3r

Ch0cu3r

    Advanced Member

  • Moderators
  • 1,713 posts

Posted 16 February 2014 - 02:07 PM

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 by Ch0cu3r, 16 February 2014 - 02:07 PM.


#5 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 17 February 2014 - 08:10 AM   Best Answer

Thank you for the information it did work, any chance you can explain to me how to add another row, 

 

Thank you



#6 josh1600

josh1600

    Newbie

  • New Members
  • Pip
  • 7 posts

Posted 19 February 2014 - 07:12 AM

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 by josh1600, 19 February 2014 - 07:14 AM.


#7 Strider64

Strider64

    Advanced Member

  • Members
  • PipPipPip
  • 97 posts
  • LocationA burb of Detroit, MI

Posted 21 February 2014 - 09:12 AM

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 by Strider64, 21 February 2014 - 09:14 AM.

A simple basic registration/login tutorial can be found here: http://www.jrpepp.co...en.php?page=PHP





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com