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

Question

我有这样的事情：

[ [span][link]              ]

但我想要这样的东西：

[       [span][link]        ]

其中元素内部的<span>和元素水平居中<a><div>

span并且a元素具有自动宽度

div硬编码宽度为 250px

怎么做？

我当前的 CSS 代码不起作用，它位于左侧；（：

a {
    margin: 0px; 
    padding: 0px;
    display: block;
    float: left;
    width: auto;
}

span {
    float: left;
}

div {
    display: inline;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

和 HTML：

<div>
   <span>Name</span>
   <a href="#">Link</a>
</div>

Answer 1

使用inline-block 显示器

<div class="outer">
   <span>Name</span>
   <a href="#">Link</a>
</div>

CSS：

span, a {
    display: inline-block;
}

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

jsFiddle 演示

Answer 2

a从和 中删除浮动，span而不是浮动 div。尝试用这个替换你的 CSS：

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

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