CSS，居中的 div，缩小以适应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/690397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS, centered div, shrink to fit?
提问by dirtside
Here's what I want:
这是我想要的：
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
...where the "some text" block is a div. I want the div to be the minimum width necessary to contain its text without wrapping. If the text is too long to fit without wrapping, then it's okay if it wraps.
...其中“一些文本”块是一个 div。我希望 div 是包含其文本而不换行所需的最小宽度。如果文本太长而不适合不换行，那么换行也没关系。
I do NOT want to set an explicit width for the div. I don't want to set min-width or max-width either; like I said, if there's too much text to contain on one line without wrapping, then it's okay if it wraps.
我不想为 div 设置显式宽度。我也不想设置最小宽度或最大宽度；就像我说的，如果在没有换行的情况下在一行中包含太多文本，那么换行也没关系。
回答by Josh Stodola
DIV elements are block-level by default, which means they automatically get 100% width. To change that, use this CSS...
默认情况下，DIV 元素是块级的，这意味着它们会自动获得 100% 的宽度。要更改它，请使用此 CSS ...
.centerBox {
display:inline-block;
text-align:center;
}
<div class="centerBox">
Some text
</div>
EDIT: Updated to use a CSS class rather than inline attribute and changed "block" to "inline-block"
编辑：更新为使用 CSS 类而不是内联属性并将“块”更改为“内联块”
回答by Konstantin Tarkus
<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>
Hint: don't use DIVs for text blocks (for SEO and a better semantic purposes)
提示：不要对文本块使用 DIV（为了 SEO 和更好的语义目的）
回答by dirtside
Props to Josh Stodola, although he wasn't exactly right. The property needed is:
支持乔什·斯托多拉，尽管他并不完全正确。需要的属性是：
display: inline-block;
Which has solved my problem. Yay!
这解决了我的问题。好极了！
回答by Lukas
I don't know, the solutions here seem partially right, but then don't really work. Based on Josh Stodola's answer, here's a cross-browser solution tested in Firefox, Safari, Chrome and IE 7, 8 & 9
我不知道，这里的解决方案似乎部分正确，但实际上并不起作用。基于 Josh Stodola 的回答，这是一个在 Firefox、Safari、Chrome 和 IE 7、8 和 9 中测试的跨浏览器解决方案
CSS:
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;
}
Markup:
标记：
<div id="centered-div">
Cum sociis natoque penatibus et magnis dis<br />
parturient montes, nascetur ridiculus mus.
</div>
To add IE6 support (sigh), add _height: [yourvalue]to the div. Yes, with an underscore.
要添加 IE6 支持（叹气），请添加_height: [yourvalue]到 div。是的，带有下划线。
Test it yourself on JSFiddle: http://jsfiddle.net/atp4B/2/
在 JSFiddle 上自行测试：http: //jsfiddle.net/atp4B/2/
回答by Z_Doctor
Here's an example I made of exactly what your looking for:
(jsFiddled here: http://jsfiddle.net/yohphomu/)
这是我完全按照您的要求制作的示例：
（jsFiddled 在这里：http: //jsfiddle.net/yohphomu/）
Warning:
警告：
I'm a CSS fanatic!!!
我是一个 CSS 狂热者！！！
If I understand your question correctly, there is no need to set a height or width because their default setting is auto (that being said you can use auto), but the only problem with this is that if you wanted to change the background or put a border it will make it around more than the desired field. Why is that and how do we fix it, read on.
如果我正确理解您的问题，则无需设置高度或宽度，因为它们的默认设置是自动（据说您可以使用自动），但唯一的问题是如果您想更改背景或放置一个边界，它将使它围绕超过所需的领域。为什么会这样以及我们如何解决它，请继续阅读。
Or just copy and study the example.
或者只是复制并研究示例。
Any one having this problem hasn't realized on thing (assuming you have this problem and are using div's) anything between div tags is considered (for understanding purposes) a complete set, meaning that in that div is all the things you want it to stand for (computers do what they're told, not what you want them to do) so (for example) in order to set the text-align to center it needs that whole lines space and (ultimately) if it had a border, it would border all the space it used. If you understand this read on, if not well can't help you there.
任何有这个问题的人都没有意识到（假设你有这个问题并且正在使用 div）div 标签之间的任何东西都被认为是（为了理解目的）一个完整的集合，这意味着在那个 div 中是你想要的所有东西代表（计算机做他们被告知的事情，而不是你想让他们做的事情）所以（例如）为了将 text-align 设置为居中，它需要整行空间，并且（最终）如果它有边框，它将与它使用的所有空间接壤。如果您理解这一点，请继续阅读，如果不能很好地帮助您。
So now that we understand what happens, how do we fix it? Well we need one part to center it, the other to color it. In my example I used a div to center it and span to color. Did I need the div? I'm am positive I did not. I could have achieved the same thing by using the p to center (or I could get rid of the p and just use div). The reason I did this was to keep it organized.
那么现在我们了解了发生了什么，我们如何解决它？嗯，我们需要一个部分来居中，另一部分来给它上色。在我的示例中，我使用 div 将其居中并跨度为颜色。我需要div吗？我很肯定我没有。我可以通过使用 p 居中来实现同样的目的（或者我可以去掉 p 并只使用 div）。我这样做的原因是为了让它井井有条。
Actually just because I didn't realize until I thought about it, but didn't feel like fixing it.
其实只是因为我没有意识到，直到我想到它，但不想修复它。
Hope this answered your question. Took you 4 years for an answer but me, 30 mins to figure it out (and I've been studying CSS for a few days now).
希望这回答了你的问题。你花了 4 年时间才找到答案，但我花了 30 分钟才弄明白（我已经研究 CSS 好几天了）。
The Example:
这个例子：
<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>
Then css would look like:
然后 css 看起来像：
.container {
width: 500px;
height: 500px;
}
.text {
font-size: 20px;
}
.holder {
text-align: center;
}
span {
background-color: blue;
border: 1px solid black;
}
Notice: I set the container with set width and height because I was working on a project at the same time and to simulate a full screen with text.
注意：我设置了容器的宽度和高度，因为我正在同时处理一个项目并用文本模拟全屏。
Also note that I have made it so that that the text has a separate background color with a border. I did this to show its measurements are independent and rescale when needed.
另请注意，我已使文本具有带边框的单独背景颜色。我这样做是为了表明它的测量是独立的，并在需要时重新调整。
You are welcome, also I think people didn't understand your question. Hope I did.
不客气，我认为人们没有理解你的问题。希望我做到了。
回答by Peter Gordon
I recommend flexbox! See what's possible at this website, solved by flexbox.
我推荐flexbox！看看这个网站上有什么可能，由 flexbox 解决。
It's quite new but works in all the major modern browsers (IE10 uses -ms-prefix, IE11+, Firefox 31+, Chrome 31+, Safari 7+, ...) - see this chart.
它很新，但适用于所有主要的现代浏览器（IE10 使用-ms-前缀、IE11+、Firefox 31+、Chrome 31+、Safari 7+，...） - 请参阅此图表。
Basically, vertical and horizontal centering, complete with dynamic sizing, can be accomplished in 4 statements:
基本上，垂直和水平居中，以及动态调整大小，可以通过 4 条语句完成：
parent {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Make surethis parent actually is 100% height. You may need to set bodyand htmlto 100% height too.
确保这个父级实际上是 100% 的高度。您可能还需要将body和设置html为 100% 高度。
My implementation of this can be seen at my own personal website, http://pgmann.cf.
我的实现可以在我自己的个人网站http://pgmann.cf 上看到。
回答by David Snabel-Caunt
Something like this?
像这样的东西？
<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>
回答by Vladimir Bundalo
<style>
p.one
{
border-style:solid;
border-width:2px;
border-color:red;
display:inline-block;
}
</style>
<p class="one">some text</p>
回答by Crismogram
HTML
HTML
<div class="outerdiv">
<div class="innerdiv">
++++TEXT+++
</div>
</div>
CSS
CSS
.outerdiv{
text-align: center;
}
.innerdiv{
display: inline-block;
}
