如何在CSS网格中对齐图像_Css

如何在CSS网格中对齐图像

css

如何在CSS网格中对齐图像,css,Css,我正在用html和css重新创建下面的photoshop模板。我越来越接近于复制它，但是我很难对齐一些图像来更接近地复制模板我的html如下所示： <div className="methodology__processPoints"> {/* <div> */} <img className="process__image" src={one}/>

我正在用html和css重新创建下面的photoshop模板。我越来越接近于复制它，但是我很难对齐一些图像来更接近地复制模板

我的html如下所示：

 <div className="methodology__processPoints">

        {/* <div> */}
            <img className="process__image" src={one}/>
            <div className="process__text">
                <h2>First point</h2>
                <p>risus viverra adipiscing at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam quisque id</p>
            </div>
            <img className="process__arrow"src={oneArrow}/>
            
        {/* </div> */}

        {/* <div> */}
            <img className="process__arrow" src={twoArrow}/>
            <div className="process__text --odd">
                <h2>Second point</h2>
                <p>risus viverra adipiscing at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam quisque id</p>
            </div>
            <img className="process__image" src={two}/>
        {/* </div> */}
       
       {/* <div> */}
            <img className="process__image" src={three}/>
            <div className="process__text">
                <h2>Third point</h2>
                <p>risus viverra adipiscing at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam quisque id</p>
            </div>
            <img className="process__arrow" src={threeArrow}/>
            
       {/* </div> */}

        {/* <div> */}
            <div className="process__arrow"></div>
            <div className="process__text --odd">
                <h2>Fourth point</h2>
                <p>risus viverra adipiscing at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam quisque id</p>
            </div>
            <img className="process__image" src={four}/>
        {/* </div> */}

    </div>

这将产生以下结果：

我正在努力弄清楚如何在CSS网格中精确控制图像的位置。此时，图像与网格的起点（即左边框）对齐，如下图所示的元素检查器开发工具所示：

如何使单个图像居中以与父网格单元的一个角对齐，而不是仅与左边框对齐？例如，我想将“1”图像移动到其父网格单元格的右下角，将第一个箭头图像移动到其父网格单元格的左下角。

要对齐其网格框内的任何项目，请执行以下操作：

选择项目（在本例中为图像）

赋予它以下属性：

。我的图像{
自我辩护：开始；
}

上面的代码将其放置在框的左侧

。我的图像{
自我辩护：结束；
}

上面的代码将其放置在框的右侧

。我的图像{
自我辩护：结束；
}

上面的代码将其放置在框的中心。