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

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

我试图围绕另一个元素(在这种情况下是UL)包裹DIV并将其环绕并同时保持两个居中。作为额外的奖励,我不能设置特定的宽度,因为包装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:

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

One state of the UL width

UL宽度的一种状态

Another state of the width

宽度的另一种状态

The wrapping DIV can't stretch the full width of the container. It has to wrap around the 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.

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

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

4 个解决方案

#1

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>

#2

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)标记环绕内容。填充,边框,边距将确保显示空的DIV标记。制作空DIV标签显示的其他技巧是使用或:{content:。;能见度:隐藏; }。

If you don't want the control-label tags to wrap, adding white-space : nowrap.

如果您不希望包装control-label标签,请添加white-space: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.

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

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用于告诉控制标签(DIV)标签完全包裹它的内容。不只是文本,而是边框,填充和边距设置绘制的框边缘。

This arrangement of CSS properties is what causes the outer and inner boxes to be rendered properly, or as expected.

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

Happy Coding.

#3

You didn't supply code, but take a look at this fiddle I just setup, which might help:

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

http://jsfiddle.net/qXDJr/

Please let me know if I'm misunderstanding what you mean. Example code will always help for future reference.

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

#4

This might help. If you cant set the width you can just add align='center' in the div wrapping ul

这可能有所帮助。如果你不能设置宽度,你可以在div包装ul中添加align ='center'

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

#1