TailwindCSS -图像不想显示块

Question

大家好，我希望当屏幕尺寸小于……时，我的图像是垂直对齐的！但不起作用。我在TailwindCSS很新，这就是为什么我不知道哪里出了问题，也不知道我能做得更好。

我想要的：照片应该像这里一样在下面。

我的代码：

<div class="grid grid-cols-2 pl-20">
  <div class="center p-8">
    <h1 class="text-5xl font-bold">Hello this is a example</h1> 
</div>
  <div class="test center-img mx-8">
    <img src="assets/security.svg" alt="">
  </div>
</div>

CSS

.test {
  display: block;
}

.center-img {
  margin: auto;
  width: 80%;
}

我不会崩溃的。为什么？

(谢谢你的帮助:)

Answer 1

大家好，我希望当屏幕尺寸小于……时，我的图像是垂直对齐的！但不起作用。

当屏幕很小时，你想要做某事的想法是错误的。

当屏幕很大的时候，请用这样的想法来做一些事情。

下面的示例为屏幕上的grid提供了更多的md。

<div class="md:grid md:grid-cols-2 pl-20">
    <div class="center p-8">
      <h1 class="text-5xl font-bold">Hello this is a example</h1> 
  </div>
    <div class="test center-img mx-8">
      <img src="assets/security.svg" alt="">
    </div>
</div>

以下将是有益的：

https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens

这种方法最让人惊讶的地方是，要为移动设备设计样式，您需要使用实用程序的非前缀版本，而不是sm:前缀版本。不要把sm当作“在小屏幕上”的意思，把它想成“在小断点上”。因此，通常最好先为设计实现移动布局，然后在任何对sm屏幕有意义的更改上进行分层，然后再对md屏幕等进行分层。

Answer 2

从父div中删除网格-cols-2。