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

这是我的代码。我需要缩略图位于所有屏幕分辨率的中心。但我做不到。我什至尝试过标签。它也没有用。我应该怎么办？

4

3 回答 3

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;
}
于 2012-06-16T19:01:25.303 回答
1

使用以下组件：

  • height:100% 用于 html 标签、body 标签、容器和一个空的占位符元素

  • 显示：内联块；和 vertical-align: middle 用于内容和占位符，用于垂直居中跨浏览器具有未定义高度的内容。

  • 占位符元素被赋予 100% 的高度来支撑线框，因此 vertical-align: middle 具有预期的效果。

  • 一个固定宽度的容器来包装图像。

  • display:inline 用于内容 div 和 text-align center 到容器 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>

于 2012-06-21T20:27:48.390 回答
1

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。首先
，您需要设置导航面板的底部边距，这样它们就不会与您的图片重叠。然后用像素定义缩略图区域的宽度。例如`宽度：500px; 然后将 min-width 属性设置为不向左推图片的最小尺寸。例如最小宽度：500px；。然后将其在页面中居中设置 margin-left 和 margin-right 为图片区域自动。

于 2012-06-16T20:17:00.620 回答