TailwindCSS - 图片不想显示块

Question

大家好，我希望我的图像在屏幕尺寸小于...时垂直对齐！但它不起作用。我是 Tailwind 的新手CSS，这就是为什么我不知道哪里出了问题或我可以做得更好的原因。

我想要什么： The picture should be down there like here.

我的代码：

HTML

<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-cols-2 div

Answer 2

Hello guys i want that my image is align vertically when the screen size is smaller than ... ! But it do not work.

想在屏幕小的时候做点什么的想法是错误的。

请以想在屏幕大时做点什么的想法制作。

下面的例子给了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

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning “on small screens”, think of it as “at the small breakpoint“.

For this reason, it’s often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for sm screens, followed by md screens, etc.

TailwindCSS - 图片不想显示块

TailwindCSS - Image don't want to display block

html

css

tailwind-css