how to auto center thumbnails for all screen sizes

问题

body{
    width:auto;
    color:white;
    font-size:15px;
    width:100%;
    max-width:1980px;
    min-width:334px;    
    margin:0px auto;
}

This is my code. I need thumbnails to be in the center for all screen resolutions. But I can't do it. I even tried tag. It didn't work either. What should I do?

回答1:

see this url : http://jsfiddle.net/DyRS4/2/

html:

<div id="my-div">my div</div>

css:

div#my-div{
    margin:0px auto;
    background: red;
    width: 100px;
    height: 100px;
}

回答2:

CSS

.picture_area { width:/*width of picture area you want in pixels*/;
                height: auto; 
                min-width:/*smallest size of window in pixels that does not push pics left*/;}
                margin-left: auto; margin-right: auto; }
.navigation_area { margin-bottom: 5%; }

HTML

 <div class="navigation_area">
        <!--Nav code here-->
    </div>


    <div class="picture_area">
          <!--All your image code here-->
    </div>

You would want to create a special div for the area where you put your thumbnails in. First
you need to set the bottoms margins of your nav panel so they don't overlap with your pictures. Then define the width of your thumbnail area with pixels. For example `width: 500px; then set the min-width attribute to the smallest size that does not push pictures left. For example min-width: 500px;. Then to center it in the page set margin-left and margin-right for picture area to auto.

回答3:

Use the following components:

height:100% for the html tag, body tag, container and an empty placeholder element
display:inline-block; and vertical-align: middle for the content and placeholder to vertically center content that has an undefined height across browsers.
the placeholder element is given 100% height to prop up the line box, so that vertical-align: middle has the desired effect.
a fixed width container to wrap the images.
display:inline for the content div and text-align center to the container div to do horizontal centering for content that has an undefined width across browsers.

Combine both the vertical-align and text-align techniques to create a centered image gallery:

    <!doctype html>
    <html>
    <head>
    <title>Centered Image Gallery</title>
    <style type="text/css">
    html, body, .container, .placeholder { height: 100%;}
    
    img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; }
    
    .container { text-align:center; }
    
    /* Use width of less than 100% for Firefox and Webkit */
    .wrapper { width: 50%; }
    
    .placeholder, .wrapper, .content { vertical-align: middle; }
    
    /* Use inline-block for wrapper and placeholder */
    .placeholder, .wrapper { display: inline-block; }
    
    .fixed { min-width: 1px; }
    
    .content { display:inline; }
    
    @media,
     {
     .wrapper { display:inline; }
     }
     </style>
    
    </head>
      <body>
      <div class="container">
        <div class="content">
            <div class="wrapper">
              <div class="fixed">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
            </div>
          </div>
       </div>
       <span class="placeholder"></span>
    </div>
    
    </body>
    </html>

来源：https://stackoverflow.com/questions/11066145/how-to-auto-center-thumbnails-for-all-screen-sizes

标签

html

css

thumbnails

center

fluid-layout