如何解决如何将按钮图标与图像对齐
我正在学习使用 Material-ui 进行 React,我对 css 没问题,但我通常很难对齐。
我正在尝试使用两个按钮来回“照片导航”。按钮应在照片中间垂直对齐,并在每端水平对齐。 到目前为止,我已经有了这个(我愿意接受任何更改建议):
组件 1:
const useStyles = makeStyles((theme) => ({
layout: {
width: 'auto',marginLeft: theme.spacing(2),marginRight: theme.spacing(2),[theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
width: 600,marginLeft: 'auto',marginRight: 'auto',},paper: {
marginTop: theme.spacing(3),marginBottom: theme.spacing(3),padding: theme.spacing(2),[theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
marginTop: theme.spacing(6),marginBottom: theme.spacing(6),padding: theme.spacing(3),}));
const Item = props => {
const classes = useStyles();
return (
<main className={classes.layout}>
<Paper className={classes.paper}>
<ItemPhotos />
<h1>Add Item</h1>
hello
</Paper>
</main>
)
}
组件 2:
const useStyles = makeStyles((theme) => ({
rootPhotos: {
width: '250px',height: '250px',position: 'relative',icons: {
position: 'absolute',top: '125px',display: 'inline-block',width: '100%',image: {
width: '250px',iconRight: {
float: 'right',iconLeft: {
float: 'left',}
}));
export default function ItemPhotos() {
const classes = useStyles();
return (
<div className={classes.rootPhotos} >
<div className={classes.icons}>
<IconButton className={classes.iconLeft}>
<NavigateBeforeIcon/>
</IconButton>
<IconButton className={classes.iconRight}>
<NavigateNextIcon/>
</IconButton>
</div>
<img src={image} alt="hello" className={classes.image} />
</div>
);
}
它们垂直对齐,但是当我设置 rootPhotos 的宽度时,整个组件向左移动。 我不确定如何使它正确,而且我很确定它很简单。 在此先感谢您的帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。