Html 如何水平居中浮动文本

如果你去缩小窗口的宽度来查看屏幕，就像它是一个移动设备一样，你可以看到橙色的“徽章”可能不会被输入（特别是当每行只有一个徽章适合时）。我希望它可以容纳更多的徽章，同时始终保持徽章或该行上的一组徽章水平输入。这个班级是一个没有居中的徽章，提前谢谢！！：）

jsfiddle：

这是HTML

    <div class="container">
        <div class="sidebar">
            <div class="sidebar-inner">
                <p class="badge"><span class="vertical-align">Book a Free Consultation!</span></p>
                <p class="badge"><span class="vertical-align">Second Point</span></p>
                <p class="badge"><span class="vertical-align">Third Point</span></p>
            </div>
        </div>

---

您是否尝试添加

文本对齐：居中到要集中的类

因为我没有提到你想集中哪个班级，所以我会给你一个简单的规则，试试这个

请提及
类
您想将html、css，甚至可能是一把小提琴，而不是链接到您的站点，因为您的问题无法在有人回答您的问题时立即恢复。不是全部，只是必要的部分）。您也可以转到并进行现场演示。然后添加此
text align:center您的类，然后重试
* {
    border: 0;
    margin: 0;
    padding: 0;
}

.sidebar {
    float: left;
    width: 25%;
    color: #505050;
}

.sidebar-inner {
    margin: 0 30px 0 35px;
}

.badge {
    margin: 10px auto;
    font-size: 24px;
    text-align: center;
    border-radius: 7px;
    padding: 20px 20px;
    background-color: #ed9727;
    cursor: pointer;
}

@media screen and (max-width: 490px) {

    .sidebar {
        width: 100%;
    }

    .sidebar-inner {
        padding-bottom: 20px;
        border-bottom: 2px solid #505050;
        margin: 0 30px;
        overflow: hidden;
    }

    .badge {
        float: left;
        margin: 15px 10px;
        max-width: 150px;
        min-height: 50px;
        display: table;
    }
}