Html 将 DIV 包裹在内容周围并使其居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11628764/
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
Wrapping a DIV around content and keeping it centered
提问by Hldn
I have a problem concerning CSS and HTML.
我有一个关于 CSS 和 HTML 的问题。
I'm trying to wrap a DIV around another element (an UL in this case) and having it wrap around it and at the same time keeping both centered. As an added bonus I can't set a specific width since the width of the content inside the wrapping DIV have to be dynamic (since this is basically a template).
我试图将一个 DIV 包裹在另一个元素（在这种情况下是一个 UL）周围，并让它包裹在它周围，同时保持两者居中。作为额外的奖励，我无法设置特定的宽度，因为包装 DIV 内的内容宽度必须是动态的（因为这基本上是一个模板）。
I've tried floating, and that works as far as wrapping goes, but then the thing ends up either to the right or to the left.
我试过浮动，就包装而言，这是有效的，但是事情最终要么向右，要么向左。
I'm going a bit crazy over this, and google is no help!
我对此有点疯狂，谷歌也无济于事！
Thanks in advance!
提前致谢！
UPDATE:
更新：
Sorry about not including code or images. This is what I'm trying to do illustrated with images:
很抱歉不包括代码或图像。这就是我试图用图像说明的事情：
The wrapping DIV can'tstretch the full width of the container. It has to wrap aroundthe UL.
包装 DIV不能拉伸容器的整个宽度。它包裹周围的UL。
The dark grey is the DIV around the UL. I need the DIV to wrap around the UL (which has a horizontal layout) no matter the width of the content, since like I said above, the content of the UL is going to by different from time to time. The text in the LIs are going to change.
深灰色是 UL 周围的 DIV。无论内容的宽度如何，我都需要 DIV 环绕 UL（具有水平布局），因为就像我上面所说的那样，UL 的内容会不时变化。LI 中的文本将发生变化。
I also need it to be centered. I've made it work with float left and float right, but I need it to be centered.
我也需要它居中。我已经让它与 float left 和 float right 一起工作，但我需要它居中。
This is the code I'm currently using for the container DIV and the UL and LI elements:
这是我目前用于容器 DIV 和 UL 和 LI 元素的代码：
#container{
height: 100px;
width: 500px;
font-size: 14px;
color: #grey;
display: table-cell;
vertical-align: middle;
}
#container ul{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#container li{
background: url(checkmark.png) center left no-repeat;
display: inline;
padding-left: 20px;
margin-right: 5px;
}
#container li:last-child{
margin-right: 0;
}
回答by Nagaraj Chandran
UPDATED
更新
I got it. Is it this you were looking for?? http://jsfiddle.net/vZNLJ/20/
我知道了。这是你要找的吗？？http://jsfiddle.net/vZNLJ/20/
#wrapper {
background: #ccc;
margin: 0 auto; /* to make the div center align to the browser */
padding: 20px;
width: 500px; /* set it to anything */
text-align: center;
}
#wrapper ul {
background: #aaa;
padding: 10px;
display: inline-block;
}
#wrapper ul li {
color: #fff;
display: inline-block;
margin: 0 20px 0 0;
}
#wrapper ul li:last-child {
color: #fff;
display: inline-block;
margin: 0;
}<div id="wrapper">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>回答by E Net Arch
The problem isn't wrapping the DIV around the content, but getting the content to state it's actual size, therefore pushing the DIV boundaries out. There are several things that need to be considered when tackling this issue. Not just from an existing UL or LI tag, but a DIV within a DIV.
问题不在于将 DIV 包裹在内容周围，而是让内容声明其实际大小，从而将 DIV 边界推开。在处理这个问题时，有几件事需要考虑。不仅来自现有的 UL 或 LI 标签，还来自 DIV 中的 DIV。
I use custom tags to help describe layouts cleaner. Custom tags are DIV tags, thus their properties must be manipulated by CSS in order to get the proper behavior.
我使用自定义标签来帮助更清晰地描述布局。自定义标签是 DIV 标签，因此它们的属性必须由 CSS 操作才能获得正确的行为。
<layout-linear horizontal>
<control-label>Label 1</control-label>
<control-label>Label 2</control-label>
<control-label>Label 3</control-label>
<control-label>Label 4</control-label>
<control-label>Label 5</control-label>
</layout-linear>
This layout suggests that the contents .. the control-label(s) tags .. will be display in a horizontal row. To get the border for the layout-linear tag to wrap around the content of the control-label tags, there are several things to do:
此布局建议内容 .. control-label(s) 标签 .. 将显示在水平行中。要让 layout-linear 标签的边框环绕 control-label 标签的内容，有几件事要做：
layout-linear[horizontal]
{
display : block;
box-sizing: border-box;
border : 1px solid black;
padding : 1px 1px 1px 1px;
white-space: nowrap;
width : 100%;
clear : both;
text-align : center;
}
First, the box-sizing property must be set to border-box. This will force the linear-layout (DIV) tag to wrap around content. Padding, Border, Margin will insure that an empty DIV tag displays. Other tricks to make an empty DIV tag display are to use or :after { content:.; visibility: hidden; }.
首先，box-sizing 属性必须设置为 border-box。这将强制线性布局 (DIV) 标签环绕内容。Padding、Border、Margin 将确保显示一个空的 DIV 标签。使空 DIV 标签显示的其他技巧是使用或 :after { content:.; 可见性：隐藏；}.
If you don't want the control-label tags to wrap, adding white-space : nowrap.
如果您不想让 control-label 标签换行，请添加空格：nowrap。
I will discuss text-align when I discuss the float property of the control-label tag.
当我讨论 control-label 标签的 float 属性时，我将讨论 text-align。
The next part requires the inner DIV tags (control-labels) to properly specify their box-sizing type and borders.
下一部分需要内部 DIV 标签（控制标签）来正确指定它们的框大小类型和边框。
control-label
{
display : inline-block;
/* float : left; */
box-sizing: border-box;
border : 1px solid black;
margin : 5px 5px 5px 5px;
padding : 5px 5px 5px 5px;
}
Display : inline-block, causes the control-label tags to flow left to right. Display : Block, will cause the tags to stack up vertically.
Display : inline-block，使控制标签标签从左到右流动。Display : Block，将导致标签垂直堆叠。
Float is commented out specifically to draw your attention to the fact that float will cause the layout-linear tag shrink to its smallest box size, based on the margins, padding, and border.
Float 被特别注释掉是为了让您注意这样一个事实，即基于边距、填充和边框，浮动会导致布局线性标签缩小到其最小的框大小。
To have the control-labels flow right to left, add text-align : right to the layout-linear tag. Or in this specific case, set text-align : center.
要让控制标签从右向左流动，请将 text-align : right 添加到 layout-linear 标签。或者在这种特定情况下，设置 text-align : center。
Again, box-sizing is used to tell the control-label (DIV) tag to wrap around it's content completely. Not just the text, but the edges of the box as drawn by the border, padding and margin settings.
同样，box-sizing 用于告诉 control-label (DIV) 标签完全环绕它的内容。不仅仅是文本，还有由边框、填充和边距设置绘制的框的边缘。
This arrangement of CSS properties is what causes the outer and inner boxes to be rendered properly, or as expected.
CSS 属性的这种排列是导致外框和内框正确渲染或按预期渲染的原因。
Happy Coding.
快乐编码。
回答by Jyosua
This is an old post, but what you can do now is:
这是一个旧帖子，但你现在可以做的是：
<div style="display: flex; justify-content: center;">
<div style="display: inline-block;">
<input type="button" value="Example Button" />
</div>
</div>
回答by Michael Giovanni Pumo
You didn't supply code, but take a look at this fiddle I just setup, which might help:
您没有提供代码，但请看一下我刚刚设置的这个小提琴，这可能会有所帮助：
Please let me know if I'm misunderstanding what you mean. Example code will always help for future reference.
如果我误解了你的意思，请告诉我。示例代码将始终有助于将来参考。
回答by Anita Sharma
This might help.
If you cant set the width you can just add align='center'in the divwrapping ul
这可能会有所帮助。如果你不能设置宽度，你可以align='center'在div包装中添加ul
<div align="center">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>
