Css 当使用内部元素作为显示：块时，如何使用自动宽度水平居中div？

我有这样的想法：

[ [span][link]              ]

[       [span][link]        ]

但我想要这样的东西：

[ [span][link]              ]

[       [span][link]        ]

其中

和

---

使用

内联块

---

从

a

和

span

中移除浮动，而是浮动div。尝试用以下内容替换CSS：

a {
    margin: 0px; 
    padding: 0px;
}

div {
    text-align: center;
    width: 200px;
    float: left;
}

---

这对我不起作用；（否、span和link应该在div内部。不允许使用其他元素。尝试添加

display:block；

以链接和span它将不起作用。@dmn77您知道

display:block

的作用吗？作为

block

的元素会将所有其他元素踢离其水平通道。@Itay我想设置块元素，如果它只是内联的，我不能浮动：左，必要时使用自定义高度和宽度。这是非块元素的限制。@JeffNoel不，不同的是，它们有我定义的百分比大小（以像素为单位）。如果你想让跨度和链接在div中居中，为什么要浮动它们？为什么链接设置为显示块and div是内联的？@j08691因为图形和样式，它必须是内联的way@dmn77很抱歉，但您想要实现的目标是不可能的。您不能在容器元素中居中放置两个元素，它们是

display:block；

，浮动时旁边没有任何间隔元素。可能在

HTML7.01

@dmn7中实现7：为什么？内联块提供了完全相同的功能，只是更适合您的问题。您不能坚持不更改HTML，保持

a和span

与

display:block

和

float:left

一起显示，并期望事情神奇地工作。

span, a {
    display: inline-block;
}

.outer {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background: yellow;
    width: 500px;
    float:left;
}

a {
    margin: 0px; 
    padding: 0px;
}

div {
    text-align: center;
    width: 200px;
    float: left;
}