Question

如果你去缩小窗口的宽度来查看屏幕，就好像它是一个移动设备，你可以看到橙色＆＃34;徽章＆＃34;可能没有输入（特别是当每行只有一个徽章时）我希望它尽可能适合更多徽章，同时始终保持徽章或水平输入的那一行徽章。这个班级是没有居中的徽章，请提前谢谢!! ：）

jsfiddle：http://jsfiddle.net/avg24wrk/

这是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>

这是CSS

* {
    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;
    }
}

Answer 1

您是否尝试将text-align: center;添加到要中心的课程

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

请提及您想要居中的class

如何水平居中浮动文本

1 个答案: