css 顺风JSx图像不会集中在我的卡

tjrkku2a  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(109)

我做了一套三张卡,将显示信息在三张卡的顶部是一个图像,我正在使用JSX和顺风,但似乎不能得到图像的中心,它坐在左边。我如何使它的图像是正确的中心我错过了什么?盯着它是没有帮助的!
这是我的代号TIA!

<section>
      <div>
        <h3 className='text-3xl py-10 text-center'>About Me </h3>
        <p className='text-center text-md py-2 leading-8 text-gray-800'>
          Blah blah blah  <span className="text-teal-500 text-md">Tech</span>  blah
        </p>

      </div>
      

      
      <div className='lg:flex gap-10 '>
      <div className='text-center shadow-lg p-10 rounded-xl my-10'>
          <Image src={design} width={100} height={100} />
          <h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
          <p className='py-2'>

            Creating elegant designs suited for your needs

          </p>
          <h4 className='py-4 text-teal-600'>Design tools I use</h4>
          <p className='text-gray-800 py-1'>photoshop</p>
          <p className='text-gray-800 py-1'>Aftereffects</p>
          <p className='text-gray-800 py-1'>Blender</p>
          <p className='text-gray-800 py-1'>Figma</p>

        </div>
      
   
        <div className='text-center shadow-lg p-10 rounded-xl my-10'>
          <Image src={design} width={100} height={100} />
          <h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
          <p className='py-2'>

            Creating elegant designs suited for your needs

          </p>
          <h4 className='py-4 text-teal-600'>Design tools I use</h4>
          <p className='text-gray-800 py-1'>photoshop</p>
          <p className='text-gray-800 py-1'>Aftereffects</p>
          <p className='text-gray-800 py-1'>Blender</p>
          <p className='text-gray-800 py-1'>Figma</p>

        </div>
        <div className='text-center shadow-lg p-10 rounded-xl my-10 '>
             <Image src={design}  width={100} height={100} />
        
          <h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
          
          <p className='py-2'>

            Creating elegant designs suited for your needs

          </p>
          <h4 className='py-4 text-teal-600'>Design tools I use</h4>
          <p className='text-gray-800 py-1'>photoshop</p>
          <p className='text-gray-800 py-1'>Aftereffects</p>
          <p className='text-gray-800 py-1'>Blender</p>
          <p className='text-gray-800 py-1'>Figma</p>

        </div>
      </div>
    </section>
42fyovps

42fyovps1#

    • 问题:**您没有指定任何使图像居中的样式。
    • 解决方案:**使用FlexboxGrid来构造元素。(将图像放在案例的中心)
    • 示例:**
<div className='text-center shadow-lg p-10 rounded-xl my-10 flex flex-col items-center'>

          <Image src={design} width={100} height={100} />
          <h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
          <p className='py-2'>

            Creating elegant designs suited for your needs

          </p>
          <h4 className='py-4 text-teal-600'>Design tools I use</h4>
          <p className='text-gray-800 py-1'>photoshop</p>
          <p className='text-gray-800 py-1'>Aftereffects</p>
          <p className='text-gray-800 py-1'>Blender</p>
          <p className='text-gray-800 py-1'>Figma</p>
        </div>

相关问题