Question

我有关于CSS和HTML的问题。

我正在尝试围绕另一个元素（在这种情况下为UL）包裹DIV并将其环绕并同时保持两个居中。作为额外的奖励，我不能设置特定的宽度，因为包装DIV内的内容的宽度必须是动态的（因为这基本上是模板）。

我已经尝试过浮动，这就像包裹一样有效，但随后就会向右或向左移动。

我对此有点疯狂，谷歌没有帮助！

提前致谢！

更新：

抱歉不包含代码或图片。这就是我试图用图像说明的内容：

One state of the UL width

Another state of the width

包装DIV 无法拉伸容器的整个宽度。它必须包裹围绕 UL。

深灰色是UL周围的DIV。无论内容的宽度如何，我都需要DIV环绕UL（具有水平布局），因为正如我上面所说的，UL的内容将不时地变化。 LI中的文本将会改变。

我也需要它居中。我已经让它向左浮动并向右浮动，但我需要它居中。

这是我目前用于容器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;
}

Answer 1

<强>已更新

我明白了。这是你在找？ 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>

Answer 2

问题不在于围绕内容包装DIV，而是让内容说明它的实际大小，从而推动DIV边界。解决此问题时需要考虑几个方面。不仅来自现有的UL或LI标签，还有DIV中的DIV。

我使用自定义标记来帮助描述更清晰的布局。自定义标签是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>

此布局表明内容.. 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;
}

首先，box-sizing属性必须设置为border-box。这将强制线性布局（DIV）标记环绕内容。填充，边框，边距将确保显示空的DIV标记。制作空DIV标签的其他技巧是使用or：after {content：。;能见度：隐藏; }。

如果您不想包装control-label标签，请添加white-space：nowrap。

当我讨论control-label标签的float属性时，我将讨论text-align。

下一部分需要内部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;
}

显示：内联块，使控件标签标签从左向右流动。显示：阻止，将导致标签垂直堆叠。

Float被特别注释掉，以引起你的注意，浮动将导致布局线性标签缩小到其最小的盒子大小，基于边距，填充和边框。

要让控件标签从右向左流动，请将text-align：right添加到layout-linear标签。或者在这种特定情况下，设置text-align：center。

同样，box-sizing用于告诉控制标签（DIV）标签完全包裹它的内容。不仅是文本，还有边框，填充和边距设置绘制的框边缘。

CSS属性的这种排列是导致外框和内框正确呈现的原因，或者是预期的结果。

快乐编码。

Answer 3

你没有提供代码，但看看我刚刚设置的这个小提琴，这可能会有所帮助：

http://jsfiddle.net/qXDJr/

如果我误解你的意思，请告诉我。示例代码将始终有助于将来参考。

Answer 4

这可能会有所帮助。如果您无法设置宽度，只需在align='center'包裹div

中添加ul即可

<div align="center">
<ul>
    <li>MenuItem</li>
    <li>MenuItem</li>
    <li>MenuItem</li>
</ul>
</div>

Answer 5

这是旧文章，但是现在您可以做的是：

<div style="display: flex; justify-content: center;">
    <div style="display: inline-block;">
        <input type="button" value="Example Button" />
    </div>
</div>

围绕内容包装DIV并使其保持居中

5 个答案: