为什么跨度不在此 div 中居中？答案

【问题标题】：Why are the spans not centering within this div?为什么跨度不在此 div 中居中？
【发布时间】：2013-03-01 21:25:45
【问题描述】：

我在一个跨度内有 2 个跨度彼此相邻，类 inside_span 向上和 inside_span 向下，它们与 pulse_result_format 跨度的左侧对齐，我尝试在脉冲结果格式跨度上设置 margin: 0 auto，不工作，并显示：inline-block;

HTML：

<div class="pulse_votes_container thumb1">
    <span class="pulse_vote_buttons">
    </span>
    <span class="pulse_result_format">
        <span class='inside_span up'>{up}</span>
        <span class='inside_span down'>{down}</span>
    </span>
</div>

CSS：

.inside_span {

    display: inline-block;
    width:40%;
    border-radius: 3px 3px 3px 3px;
    margin: 10% auto 0px 0px;
    float:left;
}

.down {

    background-color:#FF6E25;
}

.up {

    background-color: rgb(70, 136, 71);
}

.pulse_result_format {

    display: inline-block;
    float: left;
    width: 100%;
    text-align: center;

    font-weight: bold;
    color: rgb(255, 255, 255);
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: baseline;
}

.pulse_votes_container {

    width:100%;
    height:100%;
    display: inline-block;
    text-align: center;
}

【问题讨论】：

标签： html css

【解决方案1】：

从.inside_span 中删除float:left

.inside_span {
    display: inline-block;
    width:40%;
    border-radius: 3px 3px 3px 3px;
    margin: 10% auto 0px 0px;
}

jsFiddle example

【讨论】：