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%身高。 您可能需要将bodyhtml设置为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; }