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 display

<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 Demo

Answer 2

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

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

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

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

2 个答案: