html - 为什么 span 不在这个 div 中居中?

标签 html css

我在一个跨度内有 2 个跨度彼此相邻,类 inside_span up 和 inside_span down,它们与 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;
}

最佳答案

.inside_span 中移除 float:left

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

jsFiddle example

关于html - 为什么 span 不在这个 div 中居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15393870/

相关文章:

html - 对齐两个不同的段落

javascript - jQuery 使用 jQuery 单击按钮并在 ajax 成功后将数据附加到响应

jquery - 固定背景图像样式不适用于 owl.carousel.js 2 slider

javascript - 如何从链接中添加/删除类

javascript - 带有文本div slider jquery的图像内容 slider

html - 如何使用一个选择器定位这些子 div?

html - 如何在 HTML/CSS 中在一行中显示文本和 slider ?

javascript - 使用 jQuery 添加多个(额外的)空格以跨越

c# - JavaScript 在本地工作,但在部署到网络服务器时无法工作

java - 将 Html.fromHtml 与 android 8 十六进制数字颜色资源一起使用