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:
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.
To make something absolutely positioned always on center you should add css rules. left:50%; margin-left:-50% of your elements width.
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.
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
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> ========================
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'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):
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
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
For vertical, just write top instead of left. For this solution it isn't optimal, but it is gold for positioning modal windows,spinners..
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!
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.