CSS，居中的div，缩小到适合？
这是我想要的：
text text text text text text text text text text text text text text text text text text text text text text +-----------+ | some text | +-----------+ text text text text text text text text text text text text text text text text text text text text text text …“某些文本”块是一个div。 我想div是必要的最小宽度来包含其文本没有包装。 如果文本太长，无法打包，那么可以打包。
我不想为div设置明确的宽度。 我不想设置最小宽度或最大宽度; 就像我说的那样，如果在一行没有包装的情况下包含太多的文本，那么包装就没关系。
DIV元素默认为块级别，这意味着它们会自动获得100％的宽度。 要改变这一点，使用这个CSS …
.centerBox { display:inline-block; text-align:center; } <div class="centerBox"> Some text </div>
编辑 ：更新为使用CSS类而不是内联属性，并将“块”更改为“内嵌块”
道具乔希Stodola，虽然他不完全正确。 所需的财产是：
display: inline-block;
这已经解决了我的问题。 好极了！
我不知道，这里的解决scheme看起来是部分正确的，但是实际上并不成功。 基于Josh Stodola的回答，这是一个跨浏览器的解决scheme，在Firefox，Safari，Chrome和IE 7,8和9
CSS：
body { text-align: center; } #centered-div { text-align: left; background: #eee; display: inline-block; /* IE7 bs - enables inline-block for div-elements*/ *display: inline; zoom: 1; }
标记：
<div id="centered-div"> Cum sociis natoque penatibus et magnis dis<br /> parturient montes, nascetur ridiculus mus. </div>
要添加IE6支持（叹气），添加_height: [yourvalue]到div。 是的，有一个下划线。
在JSFiddle上自己testing一下： http : //jsfiddle.net/atp4B/2/
<style type="text/css"> /* online this CSS property is needed */ p.block { text-align: center; } /* this is optional */ p.block cite { border: solid 1px Red; padding: 5px; } </style> <p>Some text above</p> <p class="block"><cite>some text</cite></p> <p>Some text below</p>
提示 ：不要使用DIV文本块（对于SEO和更好的语义目的）
以下是我正在寻找的一个例子：
（js在这里find： http : //jsfiddle.net/yohphomu/ ）
警告：
我是一个CSS狂热！
如果我正确理解你的问题，没有必要设置一个高度或宽度，因为他们的默认设置是自动的（也就是说你可以使用自动），但唯一的问题是，如果你想改变背景或把一个边界将使其周围超过所需的领域。 为什么是这样，我们如何解决它，阅读。
或者只是复制和研究这个例子。
任何人有这个问题没有意识到事情（假设你有这个问题，正在使用DIV的）任何之间的div标签被认为是（为了理解目的）一个完整的集合，这意味着在这个div是所有你想要的东西代表（电脑做他们被告知的事情，而不是你想要他们做的事情）所以（例如）为了设置文本alignment中心需要整行空间和（最终）如果它有一个边界，它会覆盖所有使用的空间。 如果你明白这一点，如果不好，不能帮助你。
所以现在我们明白发生了什么，我们该如何解决？ 那么我们需要一个部分来集中它，另一个来为它着色。 在我的例子中，我用div来居中并跨越颜色。 我需要这个div吗？ 我很积极，我没有。 我可以通过使用p来实现同样的事情（或者我可以摆脱p，只使用div）。 我这样做的原因是保持组织。
其实只是因为我没有意识到，直到我想到它，但不想修复它。
希望这回答你的问题。 花了4年的时间find答案，但是我花了30分钟才弄明白了（我现在已经学了几天CSS了）。
这个例子：
<div class='container'> <div class="text"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="holder"> <p><span>text here</span></p> </div> <div> text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </div>
然后，CSS看起来像：
.container { width: 500px; height: 500px; } .text { font-size: 20px; } .holder { text-align: center; } span { background-color: blue; border: 1px solid black; }
注意：我设置了宽度和高度的容器，因为我正在同时处理一个项目，并用文本模拟全屏。
另外请注意，我已经这样做了，使文本有一个单独的背景颜色与边框。 我做到了这一点，以显示其测量是独立的，并在需要时重新调整。
不客气，我也觉得人们不理解你的问题。 希望我做到了。
我build议flexbox ！ 看看这个网站有什么可能， 由flexbox解决 。
这是相当新的，但在所有主要的现代浏览器（IE10使用-ms-前缀，IE11 +，Firefox 31 +，Chrome 31 +，Safari 7 +，…） – 看到这个图表 。
基本上，垂直和水平的居中，完整的dynamic大小，可以在4个陈述中完成：
parent { display: flex; justify-content: center; align-items: center; height: 100%; }
确保这个父母实际上是100％身高。 您可能需要将body和html设置为100％的高度。
我的这个实现可以在我自己的个人网站http://pgmann.cf上看到。;
像这样的东西？
<html> <head> </head> <body style="text-align: center;"> <div style="width: 500px; margin: 0 auto;"> <p>text text text text text text text text text text text text text text text text text text text text text text</p> <div>hello</div> <p>text text text text text text text text text text text text text text text text text text text text text text</p> </div> </body>
<style> p.one { border-style:solid; border-width:2px; border-color:red; display:inline-block; } </style> <p class="one">some text</p>
HTML
<div class="outerdiv"> <div class="innerdiv"> ++++TEXT+++ </div> </div>
CSS
.outerdiv{ text-align: center; } .innerdiv{ display: inline-block; }
