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

我希望

中的“一些文本”块可以是最小宽度以容纳其文本而不换行。如果文本太长而无法在不换行的情况下适合，则可以换行。

我不想为

设置显式宽度。我也不想设置min-width或max-width；像我说的那样，如果有太多文本无法在一行上容纳而不换行，则可以换行。

- dirtside

---

这个问题仍然没有令人满意的答案。 - Steven Soroka

相关内容：https://dev59.com/OHRB5IYBdhLWcg3w9b99 - Casebash

@StevenSoroka 如果这个问题仍然对您有影响，请看一下我关于flexbox的答案...我知道这个问题很旧了。 - Peter Gordon

Answer 1

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

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


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

编辑: 现已更新为使用CSS类而非内联属性，并将“块”改为“内联块”

- Josh Stodola

---

“width: auto”是多余的，可以省略。显然，您还需要在父元素上设置“text-align: center”。这是一种技术上正确的方法，但将一个div变异为inline可能并不完全符合OP的要求！ - bobince

这个不太行，因为如果你有多行文本，任何格式（边框，填充等）都会应用于每个单独的部分。但是 inline-block 就可以了！耶！ - dirtside

你可以用 "span" 元素替换它，这样就不需要指定 "display: inline: width: auto" 了，但是你的解决方案没有将 "some text" 放在中心位置。 - Konstantin Tarkus

能否缩小 div，但仍然不让其他元素取代它？ - Muhammad Umer

Answer 2

我不知道，这里的解决方案似乎部分正确，但也不完全有效。根据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的支持（唉），请在div中添加_height：[yourvalue]。是的，带下划线。

在JSFiddle上进行自己的测试：http://jsfiddle.net/atp4B/2/

- Lukas

Answer 3

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

- Koistya Navin

---

好的，同意，但是你也添加了不必要的元素（span）。 - Seb

它需要正确的CSS注释——/* */而不是//。另外，你的图片链接已经失效了。 - Reinstate Monica -- notmaynard

Answer 4

感谢Josh Stodola，尽管他并不完全正确。所需属性是：

display: inline-block;

这解决了我的问题。太棒了！

- dirtside

---

在某些浏览器中，inline-block无法正常工作。如果需要跨浏览器支持，请不要使用它。 - Konstantin Tarkus

inline-block 在我所知道的所有浏览器中都可以使用。为了处理 IE < 8，您需要使用整个短语：display: inline-block; *zoom: 1; *display: inline;。每当您需要 inline-block 时，请养成编写整个短语的习惯。但是请不要在您真正需要 inline-block 时使用 float。 - colllin

Answer 5

我推荐使用flexbox！在这个网站上可以看到可能的情况: solved by flexbox。尽管它相对较新，但在所有主要现代浏览器中都可以工作（IE10使用-ms-前缀，IE11+，Firefox 31+，Chrome 31+，Safari 7+等）-请参见此图表。基本上，垂直和水平居中，包括动态大小调整，可以通过4个语句完成：

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

请确保父元素实际上是100%的高度。您可能还需要将和设置为100％的高度。

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

- Peter Gordon

Answer 6

这是我做的一个例子，正好符合您的要求：
（在jsFiddle上可见：http://jsfiddle.net/yohphomu/）

警告：

我是CSS迷！！！

如果我正确地理解了您的问题，则无需设置高度或宽度，因为它们的默认设置是auto（也可以使用auto），但唯一的问题是，如果您想更改背景或添加边框，它会将其包括在超出期望字段的范围内。为什么会这样？如何解决，请继续阅读。

或者只需复制并学习示例。

任何遇到这个问题的人都没有意识到一件事情（假设您遇到了这个问题并且正在使用div）：div标记之间的所有内容都被视为（便于理解）一个完整集合，这意味着在该div中，所有您希望它代表的东西都已经完成了（电脑按照指示执行操作，而不是你所期望的操作），因此（例如）为了将文本对齐至中心，需要使用整行的空间，而且（最终）如果有边框，则会将其边框化所有使用的空间。如果您理解了这一点，请继续阅读，否则无法帮助您。

现在我们了解了发生什么，如何解决呢？好的，我们需要一个部分来居中它，另一个部分来着色。在我的示例中，我使用了一个div标记来进行居中处理，而使用了span标记来进行着色。我需要这个div标记吗？我非常确定不需要。通过将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;
}

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

还要注意的是，我让文本具有单独的背景色和边框。我这样做是为了显示其测量值是独立的，并且在需要时可以重新调整大小。

不用谢，我也认为人们没有理解你的问题。希望我理解得对。

- user2438870

---

这是错误的。OP说：“我不想为div设置显式宽度。” 收缩包装允许浏览器确定所需的最小大小，而不是指定比100％更小的绝对大小。 - jimp

Answer 7

display: inline-block 如果在所需居中的文本之前和之后未关闭块，则无法工作。您真正需要的是在块元素上设置 width: fit-content; margin: auto;，请参见代码片段。

.center {
  display: block;
  width: fit-content;
  margin: 1em auto;
  padding: .5em;
  text-align: right;
  background: yellow;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla diam sagittis, scelerisque ipsum ac, imperdiet tortor. Curabitur dapibus metus eu neque consectetur hendrerit. Cras interdum faucibus malesuada.

<div class="center">
  Lorem ipsum yourself, buddy!<br>
  Try to align this!
</div>

In auctor aliquam erat in pharetra. Suspendisse potenti. Pellentesque vehicula interdum sem vel tristique. Nullam erat nisl, imperdiet et turpis ut, ornare vulputate erat.

- Jan Turoň

Answer 8

HTML

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

CSS

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

- Crismogram

Answer 9

像这样的东西？

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

- dcaunt

Answer 10

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

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

- Vladimir Bundalo