我快疯了。我使用了搜索和谷歌，但找不到解决方案，它不起作用:(
我有一个 div 嵌套在其他 div 中，用于自动垂直居中和背景。 最初它适合垂直放置多个图像并动态调整它们的大小。 我根据图片的数量(宽度，填充)使用了几种css样式。
但是对于这个画廊我有很多图片，原来的布局分为几行，但我想要一个嵌套的“white-space:nowrap”和 overflow-x: auto;在我的分区中。 所以我可以滚动它们，但是“white-space:nowrap”破坏了整个东西并破坏了所有显示:表格属性。
我想这应该发生？但我需要一个其他解决方案或至少一个善意的提示。
我还做了一个简化的 fiddle : http://jsfiddle.net/x696B/9/ 如果您删除显示表属性，它会工作并滚动。我的 div 中需要它。 :D
这是我的 nooby css(相关部分)
html
{
height:100%;
}
body
{
height:98%;
background-color: #FFF9E5;
padding: 0px;
}
.wrapper
{
margin:auto;
padding: 0px;
z-index: 0;
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
.outer
{
z-index: 0;
padding: 0px;
display:table-cell;
vertical-align:middle;
background-color: #FFF9E5;
}
div.container
{
margin: 0 auto;
display:table;
z-index: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:60%;
background-color: #867F27;
padding-right:1%;
padding-left:1%;
white-space: nowrap;
overflow: auto;
}
.view
{
width:100%;
white-space: nowrap;
overflow-x: auto;
margin: 0 auto;
text-align: left;
}
如果我将 display:table 和 display:table-cell 标记为注释，画廊看起来不错并且可以滚动，但它没有居中。 (得到其他带有标志等的div)
这是我的html
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de">
<head>
<meta charset="utf-8">
<title>my page</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class = "logo"><img src="logo.png"/></img></div>
<div class="container">
<div class="view">
<img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-3.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-4.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-5.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-6.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-7.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-8.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-9.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-3.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-4.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-5.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-6.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-7.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-8.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-9.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
<img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
</div>
</div>
</div>
</body>
</html>
哦，请原谅我这个愚蠢的问题，到目前为止这个论坛帮了我很大的忙，但现在我输了。
提前致谢。
最佳答案
我有一个解决方案 谢谢大家，您让我动了脑筋:)并帮助我找到了解决方案 我更改了 View 类的宽度
.view
{
/*width:100%;*/ /*this resizes but nested in divs */
/*with display:table; it breaks them*/
width:800px; /*with a fixed width it works very nice*/
max-width: 75%; /*lets the gallery shrink on resize of the browser*/
white-space: nowrap;
overflow-x: auto;
margin: 0 auto;
text-align: left;
}
所以我得到了我可以保留在其他页面上的垂直居中结构，并将其用于我的画廊。 如果您调整浏览器窗口的大小并且看起来仍然不错，它甚至会调整大小(在一定程度上)。 祝你有美好的一天:)
关于html - 空白 :nowrap breaks display:table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12392396/