CSS，居中div，缩小以适合？

Question 1

这就是我想要的：

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设置显式宽度。我也不想设置最小宽度或最大宽度；就像我说的那样，如果一行中包含太多文本而没有换行，那么换行就可以了。

Question 2

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

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


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

编辑：更新为使用CSS类而不是内联属性，并将“块”更改为“内联块”

Question 3

给乔什·斯托多拉（Josh Stodola）的道具，尽管他并不完全正确。需要的属性是：

display: inline-block;

哪个解决了我的问题。好极了！

Question 4

我不知道，这里的解决方案似乎部分正确，但实际上并没有用。根据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/

Question 5

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

Question 6

这是我确切根据您的需求制作的一个示例：
（jsFiddled here：http : //jsfiddle.net/yohphomu/）

警告：

我是CSS狂热者！！！

如果我正确理解了您的问题，则无需设置高度或宽度，因为它们的默认设置是自动（也就是说您可以使用自动），但是唯一的问题是如果您想更改背景或放置边框将使它比所需的范围更多。为什么会这样以及我们如何解决它，请继续阅读。

或者只是复制并研究示例。

任何有这个问题的人都没有意识到（假设您有这个问题并且正在使用div），在div标签之间的任何东西都被认为是一个完整的集合（出于理解目的），这意味着在div中就是您想要的所有东西代表（计算机按照提示执行操作，而不是您要计算机执行的操作），因此（例如）为了将文本对齐方式设置为居中，它需要整行空间，并且（最终）需要边框，它会占用所有使用的空间。如果您理解此内容，即使不能很好地解决，也无法对您有所帮助。

因此，既然我们了解会发生什么，我们如何解决它？好吧，我们需要一个部分将其居中，另一部分进行着色。在我的示例中，我使用了div使其居中并跨度到颜色。我需要div吗？我很肯定我没有。我可以通过使用p居中来达到相同的目的（或者我可以摆脱p而只使用div）。我这样做的原因是为了使其井井有条。

其实只是因为我直到想到了才意识到，但是不想修复它。

希望这回答了您的问题。花了4年时间给你一个答案，但我花了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;
}

注意：我将容器设置为设置的宽度和高度，因为我同时在一个项目上进行工作并模拟带有文本的全屏。

还要注意，我这样做的目的是使文本具有带边框的单独背景色。我这样做是为了表明它的测量是独立的，并在需要时进行缩放。

不用客气，我想人们也不理解您的问题。希望我做到了。

Question 7

我推荐flexbox！看看在这个网站上有什么可能，可以通过flexbox解决。

这是一个相当新的功能，但可以在所有主要的现代浏览器中使用（IE10使用-ms-前缀，IE11 +，Firefox 31 +，Chrome 31 +，Safari 7 +，...）-参见此图表。

基本上，垂直居中和水平居中以及动态大小调整都可以通过4条语句完成：

parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

确保此父级实际上是100％的高度。您可能需要设置body并html以100％的高度了。

在我自己的个人网站http://pgmann.cf上可以看到我的实现方式。

Question 8

像这样吗

<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>

Question 9

<style>
p.one
{
border-style:solid;
border-width:2px;
border-color:red;
display:inline-block;
}
</style>

<p class="one">some text</p>

Question 10

的HTML

<div class="outerdiv">
<div class="innerdiv">
++++TEXT+++
</div>
</div>

的CSS

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