reactjs 使绝对位置img与相对位置img居中

7nbnzgx9  于 2023-01-01  发布在  React
关注(0)|答案(1)|浏览(186)

"嗨"
我有两张图片,一张是绝对位置(背景),另一张是相对位置,我想把相对位置放在绝对位置的中心。我试了很多方法,比如自动边距,变换等等,但都不管用。

下面是我的代码(我使用的是React.js):

import './information.css'

import Background from '../../assets/character_informations_bg.png'

export default function Information(props) {
  return (
    <div className="character-information">
        <div>
            <img src={Background} alt="" className='character-information-bg' />
            <img src={props.image} alt="" className='character-information-clothes' />
        </div>
        <p>{props.name}<br />{props.price}</p>
    </div>
  )
}

// CSS (information.css)
.character-information-bg {
    position: absolute;
}
.character-information-clothes {
    position: relative;
    max-width: 90px;
    max-height: 90px;
}
bqf10yzr

bqf10yzr1#

.character-information-clothes上使用lefttop属性
例如-

.character-information-clothes {
  position: relative;
  left: 20%;
  top: 20rem;
  max-width: 90px;
  max-height: 90px;
}

根据您的背景定位调整topleft

相关问题