Question

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

这是我的代码。我需要缩略图才能在所有屏幕分辨率的中心。但我不能这样做。我甚至试过标签。它也没用。我该怎么办？

Answer 1

请参阅此网址：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;
}

Answer 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>

您可能希望为放置缩略图的区域创建一个特殊div 您需要设置导航面板的底部边距，使它们不与图片重叠。然后使用像素定义缩略图区域的宽度。例如`width：500px;然后将min-width属性设置为不向左推图片的最小尺寸。例如min-width：500px;。然后将它居中在页面集边距左边和边距右边，图片区域为自动。

Answer 3

使用以下组件：

高度：100％用于html标记，正文标记，容器和空占位符元素
显示：内联块;和vertical-align：中间，内容和占位符垂直居中在浏览器中具有未定义高度的内容。
占位符元素的高度为100％以支撑线框，因此vertical-align：middle具有所需的效果。
用于包装图像的固定宽度容器。
显示：内容div和文本对齐中心内联到容器div，为跨浏览器的宽度不确定的内容执行水平居中。

结合垂直对齐和文本对齐技术来创建居中的图库：

    <!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>

如何为所有屏幕尺寸自动居中缩略图

3 个答案: