Jump to content

center a div tag


spudly1987
Go to solution Solved by spudly1987,

Recommended Posts

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
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.