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类而不是内联属性，并将“block”更改为“inline-block”

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

这解决了我的问题。耶！

Answer 5

以下是我正在寻找的一个例子：
（jsFiddled here：http://jsfiddle.net/yohphomu/）

警告：

我是一名CSS狂热分子!!!

如果我正确理解你的问题，就不需要设置高度或宽度，因为它们的默认设置是auto（可以说你可以使用auto），但唯一的问题是如果你想改变它背景或放置一个边框，它将使它超过所需的字段。为什么会这样，我们如何解决它，请继续阅读。

或者只是复制并研究这个例子。

任何有这个问题的人都没有意识到事情（假设你有这个问题而且正在使用div）div标签之间的任何东西都被认为是（为了理解目的）一套完整的集合，这意味着在那个div中是你所有的东西希望它代表（计算机做他们被告知的事情，而不是你想要他们做什么）所以（例如）为了将text-align设置为center它需要整行空间和（最终）如果它有一个边界，它将与它使用的所有空间接壤。如果您理解了这一点，那么如果不好就无法帮助您。

现在我们了解会发生什么，我们该如何解决？好吧，我们需要一个部件来使它居中，另一个需要为它着色。在我的例子中，我使用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;
}

注意：我设置了容器的设置宽度和高度，因为我正在同时处理一个项目并模拟带有文本的全屏。

另请注意，我已将其设置为使文本具有带边框的单独背景颜色。我这样做是为了表明它的测量是独立的，并在需要时重新调整。

欢迎你，我想人们也不理解你的问题。希望我做到了。

Answer 6

我推荐 flexbox ！请参阅本网站的solved by flexbox。

它很新，但适用于所有主要的现代浏览器（IE10使用-ms-前缀，IE11 +，Firefox 31 +，Chrome 31 +，Safari 7 +，...） - 请参阅{{ 3}}

基本上，垂直和水平定心，以及动态尺寸调整，可以用4种语句完成：

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

确保此父级实际上是100％高度。您可能还需要将body和html设置为100％的高度。

我可以在我自己的个人网站this chart上看到我的实现。

Answer 7

这样的东西？

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

Answer 8

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

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

Answer 9

<强> HTML

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

<强> CSS

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

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

9 个答案: