Question

我使用Pure.css，这就是我的代码。

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">

        <h3 class="content-subhead">Title</h3>

        <p>
            Sample Text
        </p>
        <a class="pure-button pure-button-primary" href="#">Learn More</a>
    </div>

我希望这个div在小屏幕中居中，所以我尝试is-center，但无论屏幕大小如何，它都会集中所有内容。我尝试阅读指南，但我找不到任何信息。

非常感谢任何帮助。

Answer 1

如果你想让CSS某些行为只发生在特定的屏幕尺寸上，最好的办法就是看看CSS媒体查询。

http://www.w3schools.com/css/css3_mediaqueries.asp

Pure.css最有可能在场景后面使用媒体查询。如果你在pure.css的文档中找不到适合这种行为的类，那么你可能需要创建自己的类来执行此操作。

以下是帮助您入门的一些步骤： 1.学习css媒体查询 2.在Pure.css模块的源代码中找到is-center类CSS 3.通过查看pure.css中的媒体查询，找到适合小屏幕的正确像素截止 4.将适当的媒体查询应用于is-center类以创建新类 5.给这个班级一个合适的名字，例如is-center-sm

使用Pure.css对div进行居中

1 个答案: