在设备尺寸上集中对齐项目 =< 小

Posted 2023-03-07

【中文标题】在设备尺寸上集中对齐项目 =< 小

【英文标题】：Align items centrally on devices sizes =< small

【发布时间】：2020-11-04 21:03:44

【问题描述】：

我有一个卡片组件，它在小型移动设备的屏幕尺寸上呈现如下第一张图片我将组件设置为flex-wrap。当flex-wrap 处于活动状态时，我的图像被推到卡片的左侧，即使它的容器设置为 w-full 并且我试图以justify-center 居中。我试图仅在设备较小且低于时才使图像居中。我试过设置sm: justify-center ，但它不起作用。有人对我如何重构以使此功能起作用有想法吗？谢谢

import React from "react"

export default function FeatureCard(props) 
  return (
    <div className="flex flex-row flex-wrap w-2/3 h-auto bg-gray-200 p-2 rounded-lg">
      <div className="flex xl:w-1/3 lg:w-1/3 md:w-1/3 sm:w-full xs:w-full">
        <img src=props.image />
      </div>
      <div className="flex xl:w-2/3 lg:w-2/3 md:w-2/3 sm:w-full xs:w-full text-center self-center justify-center font-bold">
        <ul>
          props.features.map(feature => (
            <li>feature</li>
          ))
        </ul>
      </div>
    </div>
  )

      <div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2">
        <div className="flex xl:w-1/2 lg:w-1/2 md:w-full sm:w-full xs:w-full h-auto justify-center py-2">
          <FeatureCard
            features=[
              "Modern Website Design",
              "Progressive Web Applications",
              "Content Management Systems",
              "JAMstack",
            ]
            image="https://img.icons8.com/color/96/000000/monitor.png"
          />
        </div>
</div>

【问题讨论】：

请创建一个示例沙箱/jsfiddle 供我们使用。谢谢。

【参考方案1】：

如果我理解正确的话，您希望 props.image 以小屏幕为中心？

如果你在<div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2"> div 中添加这样的内容会怎样：

@media (max-width: 600px) 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    

它的基本作用是在屏幕小于 600 像素时将 flex 方向更改为列而不是行，这在 tailwind-css 中可能转换为：

sm:flex-col sm:justify-center sm:items-center