CSS,居中的div,缩小到适合？

Question

这就是我想要的:

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

..."some text"块是div.我希望div是包含其文本而不包装所需的最小宽度.如果文字太长而不适合没有包装,那么它可以包装.

我不想为div设置明确的宽度.我也不想设置min-width或max-width; 就像我说的,如果有太多的文字要包含在一行而没有包装,那么如果它包装就没关系.

Answer 1

默认情况下,DIV元素是块级的,这意味着它们自动获得100%的宽度.要更改它,请使用此CSS ...

.centerBox {
  display:inline-block;
  text-align:center;
}


<div class="centerBox">
  Some text
</div>

编辑:更新为使用CSS类而不是内联属性并将"块"更改为"内联块"

Answer 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和更好的语义目的)

Answer 3

我不知道,这里的解决方案似乎部分正确,但后来却没有真正起作用.根据Josh Stodola的回答,这是一个在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上自己测试一下:http://jsfiddle.net/atp4B/2/

Answer 4

Josh Stodola的道具,尽管他并不完全正确.所需的财产是:

display: inline-block;

这解决了我的问题.好极了!