body{
width:auto;
color:white;
font-size:15px;
width:100%;
max-width:1980px;
min-width:334px;
margin:0px auto;
}
这是我的代码。我需要缩略图位于所有屏幕分辨率的中心。但我做不到。我什至尝试过标签。它也没有用。我该怎么办？
【问题讨论】：
标签： html css thumbnails center fluid-layout
查看此网址：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;
}
【讨论】：
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 为图片区域自动。
【讨论】：
使用以下组件：
html标签、body标签、容器和一个空的占位符元素的高度：100%
显示：内联块；和垂直对齐：内容和占位符的中间垂直居中在浏览器中具有未定义高度的内容。
占位符元素被赋予 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>【讨论】：