www.webdeveloper.com
Results 1 to 6 of 6

Thread: need help to center my div

  1. #1
    Join Date
    Oct 2012
    Posts
    36

    need help to center my div

    HTML Code:
    <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. #2
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    45
    which div u want to center??

  3. #3
    Join Date
    Dec 2013
    Posts
    201
    Hmm, well at least you have cleared what you really want, hmm, it's kind of hard to help when you really don't know on what purpose are you going to help..
    I can never gain something without losing everything I had before.
    ― Nadia Scrieva, Fathoms of Forgiveness | 12BET

  4. #4
    Join Date
    Oct 2012
    Posts
    36
    well i have my heading and the paragraph text which i want to stay the way it is, but what i call the image gallery is the div code, i have so far 4 side by side, but it's aligned on the left side of the page, what I want to do is center it in the page

  5. #5
    Join Date
    Feb 2014
    Location
    Glasgow
    Posts
    6
    Just put it in a <center> tag...

  6. #6
    Join Date
    Mar 2011
    Posts
    1,137
    Wrap the <div class="img">s in a <div class="imgContainer"> set to 'text-align:center'. Then change <div class="img"> from 'float:left' to 'display:inline-block' - as in:
    Code:
    .imgContainer {
      text-align:center;
    }
    div.imgBox
      {
      display:inline-block;
      margin:5px;
      padding: 5px;
      border:1px solid #0000ff;
      width:auto;
      text-align:center;
      }
    and:
    Code:
    <div class="imgContainer">
    <div class="img">...</div>
    <div class="img">...</div>
    <div class="img">...</div>
    <div class="img">...</div>
    </div><!-- end .imgContainer -->
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles