1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Positioning thumbnail images in center of page

Discussion in 'HTML & Website Design' started by Orawolf, Nov 11, 2015.

0
  1. #1
    Hi, I need to position two thumbnail images side by side and they need to be in EXACTLY middle (vertically and horizontally) of the webpage and should always stay in middle irrespective of various screen size of monitors and laptops. How do I achieve this? My sample code is below.

    <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<!-- Le styles -->
<link href="bootstrap.css" rel="stylesheet">
<link href="jaqmain.css" rel="stylesheet">
<style type="text/css">
body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.auto-style1 {
    color: #FFFFFF;
    font-size: small;
}
.auto-style2 {
    font-size: small;
}
.auto-style3 {
    font-size: x-small;
    color: #808080;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link href="img/apple-touch-icon-144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144">
<link href="img/apple-touch-icon-114-precomposed.png" rel="apple-touch-icon-precomposed" sizes="114x114">
<link href="img/apple-touch-icon-72-precomposed.png" rel="apple-touch-icon-precomposed" sizes="72x72">
<link href="img/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon-precomposed">
<link href="img/favicon.png" rel="shortcut icon">
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="header-nav">
        <div>
            <div class="container">
                <a class="brand" href="#">Testing</a>
                <!--/.nav-collapse --></div>
        </div>
    </div>
   
    <div class="nav-collapse collapse">
                    <table style="border:thick" class="navbar-form pull-right">
                        <tr style="border:thick">
                        <td><input name="Image1" type="image" style="vertical-align:central" src="../../../Users/RVaishnav/Desktop/Capture.JPGp.JPG" />
                        </td>
                        <td>
                        <input name="Image1" type="image" style="vertical-align:central" src="../../../Users/RVaishnav/Desktop/Capture.JPGp.JPG" />
                        </td>
                        </tr>
                    </table>
                </div>
   
   
</body>

</html>
    HTML:
     
    Orawolf, Nov 11, 2015 IP
  2. Ivan S

    Ivan S Member

    Messages:
    90
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    48
    #2
    In the middle of what?
     
    Ivan S, Nov 11, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Use display: flex; on the container, and flex: 1 0 auto; margin: auto; on the elements (images). This will only work in modern browsers, mind.
     
    PoPSiCLe, Nov 12, 2015 IP
  4. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #4
    To make something absolutely positioned always on center you should add css rules.
    left:50%;
    margin-left:-50% of your elements width.
     
    webcosmo, Nov 12, 2015 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    Yeah. Kinda not. That solution is seriously overpopulated with big-toothed gotchas. The use of absolute positioning is a poor practice for issues like this one.
     
    Last edited: Nov 12, 2015
    kk5st, Nov 12, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Not to mention that that will only center it horisontally, not vertically
     
    PoPSiCLe, Nov 12, 2015 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    For a method that is supported by older UAs that don't support flex, this should work on Firefox back to v3 (v2 works, but is based on an older working draft of the specs and requires modifying the structure a bit). Chrome should work back to its early days. IE should work back to v8, maybe v7. (I don't recall when MSFT decided to support CSS2.1's display property.)
    

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="Content-Type"
  content="text/html; charset=utf-8">
 
  <meta name="viewport"
  content="width=device-width;
      height=device-height;
      initial-scale=1">

  <title>
  Test document
  </title>
 
  <style type="text/css">
     html,
     body {
         background-color: white;
         color: black;
         font: 100%/1.5 sans-serif;
         height: 100%;
         margin: 0;
         padding: 0;
         position: relative;}

     p {
         font-size: 1em;}

     div.cell-holder {
          display: table;
          width: 100%;
          height: 100%;}

     div.tnails {
          display: table-cell;
          text-align: center;
          vertical-align: middle;}

     img {
          /* border is for clarity */
          border: 1px solid blue;
          display: inline-block;}

     </style>
   </head>

   <body>
    <div class="cell-holder">
      <div class="tnails">
         <img src="tnail1.jpg"
              alt="no.1"
              height="100"
              width="100">
       <img src="tnail2.jpg"
              alt="no.2"
              height="100"
              width="100">
      </div>
    </div>
  </body>
</html>
    Code (markup):
    cheers,

    gary
     
    Last edited: Nov 12, 2015
    kk5st, Nov 12, 2015 IP
  8. Orawolf

    Orawolf Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    Thanks Gary. It worked. Now I just wanted to provide a heading to each image as shown below. But lables show on the side instead of bottom of each image.

    <div class="cell-holder">
    <div class="tnails">
    <img alt="no.1" style="padding-right:150px" height="100" src="../../../Users/RVaishnav/Desktop/Capture.JPGp.JPG" width="300">
    <span>Heading1</span>
    <img alt="no.2" style="padding-left:150px" height="100" src="../../../Users/RVaishnav/Desktop/Capture.JPGp.JPG" width="300">
    <span>Heading2</span>
    </div>
    </div>
    ========================

     
    Orawolf, Nov 12, 2015 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Those are not headings, they are captions. HTML5 provides a caption element tag, but it is not backward compatible, so should not be used while a significant number of older UAs are in use. Modify the the content structure like this: 
    
  <body>
    <div class="cell-holder">
      <div class="tnails">
        <p>
          <img src="tnail1.jpg"
             alt="no.1"
             height="100"
             width="100">
          <br>
          caption 1
        </p>

        <p>
          <img src="tnail2.jpg"
             alt="no.2"
             height="100"
             width="100">
          <br>
          caption 2
        </p>
      </div>
    </div>
  </body>
    Code (markup):
    and the css like so: 
    
  div.tnails p {
      display: inline-block;}
    Code (markup):
    cheers,

    gary
     
    kk5st, Nov 12, 2015 IP
  10. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #10
    kk5st's method is the way to go if you need to support older browsers.

    What i find myself doing the most (if your cool with IE9+) plus is something like this:

    
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    Code (css):
    If stuff your centering is a fixed size you can replace translate for negative margins (this will work pretty far back):

    
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Say its 20em x 20em */
  width: 20em;
  height: 20em;
  /* nudge it back half the width and height */
  margin: -10em 0 0 -10em;
}
    Code (css):
     
    KewL, Nov 12, 2015 IP
    webcosmo likes this.
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    See my comment above re absolute positioning and feral gotchas.

    gary
     
    kk5st, Nov 12, 2015 IP
  12. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #12
    What are the gotchas? I use re absolute all the time and never really run into any
     
    KewL, Nov 13, 2015 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    It may be that you've been lucky or that you know enough to avoid the problems automatically. I recall, back in the day dealing with IE≤6 stupidities so automagically that I had a hard time describing the issues.

    First is the issue of flow; very few beginner or intermediate css users manage to grok just what flow is and how positioned elements are different.

    Second, and related to this case, is that the negative margins and translations may drag part of the AP element off screen, unscrollable, never to be seen again.

    Thirdly and onward are AP's ancestral reference, its default placement, its natural shrink-wrappage and so on.

    None of these are insurmountable, but if you don't fully understand what's going on, you're screwed when that gotcha does take a chunk from your backside.

    cheers,

    gary
     
    Last edited: Nov 13, 2015
    kk5st, Nov 13, 2015 IP
  14. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #14
    Ahh yeah I gotcha. I haven't dealt with IE6 in a long time. Positioning is definitely one of the harder concepts to pick up when your starting out, but extremely important. Almost every design i code these days requires me to get funky with the positioning and layering of things.

    The flexbox stuff that popsicle pointed out is going to be super cool when it's widely supported. Those browser prefixes for every flexbox property are such a mess right now
     
    KewL, Nov 13, 2015 IP
  15. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #15
    For vertical, just write top instead of left. For this solution it isn't optimal, but it is gold for positioning modal windows,spinners..
     
    webcosmo, Nov 14, 2015 IP
  16. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #16
    You assume you always know the size of the element. Which is not always the case.
     
    PoPSiCLe, Nov 14, 2015 IP
    deathshadow likes this.
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    While @webcosmo points out quite valid "corner cases" for where such positioning is useful, on the flip side I have to go with @PoPSiCLe in that for general layout use this begs one simple question: WHY?

    While there are certainly valid usage scenarios, generally speaking the description in the opening post reeks to me of "content for nothing" as if building some stupid "splash page" 1990's style. If it's a normal page on a normal site, what's being asked falls squarely into the category of "Are you just TRYING to piss off users?" -- that or it's simply a matter of sweeping a complete lack of content under the rug.

    Even if there is a legitimate usage scenario, be DAMNED sure that since a modern site should be responsive, that you have a plan on what to do when those images are simply too damned small to fit the screen; you also cannot predict available height with queries, and that could REALLY bite you in the backside if you aren't careful.

    I'd have to see what's ACTUALLY trying to be done to weigh in more -- this could range from "Oh, sure, that's simple" to "What the *** do you think you are doing?!?". The latter being the simple fact there are a LOT of things that you CAN do, that have zero damned business being done. Just because you can, doesn't mean you should!
     
    deathshadow, Nov 16, 2015 IP
  18. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #18
    irrespective of various screen size of monitors and laptops. How do I achieve this?

    He is building a responsive site, that is why he's complicating it.
     
    webcosmo, Nov 17, 2015 IP
  19. Orawolf

    Orawolf Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #19
    Thank you everyone. This worked.
     
    Orawolf, Nov 19, 2015 IP