在 React 中水平对齐图像和文本
Align Image and Text in Horizontal Direction in React
我正在努力实现下图中的效果。现在,我的图片在上面,而文字在下面。我想实现文字就在图像的右侧。
请检查此代码框 link CLICK HERE
代码
const drawer = (
<div>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.headerIcon}>
<AccountCircleIcon fontSize="large" />
</div>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
<Divider />
</div>
);
这是我的做法。我已经调整了图标右侧的文字。
您可以做进一步的造型:
import React from "react";
import { makeStyles } from "@material-ui/styles";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import "./styles.css";
const headerStyles = {
display: "flex",
justifyContent: "center"
};
const useStyles = makeStyles(theme => ({
root: {
display: "flex"
},
headerTitle: {
...headerStyles,
fontSize: "1.3rem",
cursor: "pointer"
},
headerIcon: {
...headerStyles,
marginTop: "1rem"
},
headerName: {
...headerStyles,
marginTop: "0.2rem"
},
headerRole: {
...headerStyles,
marginTop: "-0.8rem",
marginBottom: "1rem"
},
iconButtons: {
marginLeft: "auto"
},
userName: {
display: "flex",
flexDirection: "row"
}
}));
export default function LoginForm() {
const classes = useStyles();
const drawer = (
<div>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.userName}>
<div className={classes.headerIcon}>
<AccountCircleIcon fontSize="large" />
</div>
<div>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
</div>
</div>
<Divider />
</div>
);
return (
<nav className={classes.drawer}>
<Hidden lgUp implementation="css">
<Drawer
variant="temporary"
anchor={"left"}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
);
}
将 display: "flex"
添加到 children 并没有多大作用。我所做的是在你的图标、名称和角色周围添加了一个包装器 class,具有 display: "flex"
、flexDirection:"row"
、justifyContent: "center"
和 alignItems:"center"
属性。包装器然后所做的是将所有 div 连续“放在”它下面,例如:
<div className="classes.wrapper">
<div>This one is to the left</div>
<div>This one is to the right</div>
</div>
但是,例如,如果我将另外 2 个 div 放在右边的下面,它们将相互堆叠,因为 flexDirection 属性 设置为行 for all children 在包装纸下,但不是为了他们的 children.
<div className="classes.wrapper">
<div>This one is to the left</div>
<div>
<div>This one will be to the right on top</div>
<div>This one will be to the right under</div>
</div>
</div>
我还删除了一些其他内容,但这是代码:
import React from "react";
import { makeStyles } from "@material-ui/styles";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import "./styles.css";
const useStyles = makeStyles(theme => ({
wrapper: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
margin: "0.5rem"
},
innerWrapper: {
display: "flex",
flexDirection: "column",
alignItems: "baseline",
marginLeft: "0.5rem"
},
headerTitle: {
fontSize: "1.3rem",
cursor: "pointer"
},
headerName: {
margin: "0",
fontStyle: "bold",
fontSize: "1rem"
},
headerRole: {
margin: "0",
fontSize: "0.7rem"
},
iconButtons: {
marginLeft: "auto"
}
}));
export default function LoginForm() {
const classes = useStyles();
const drawer = (
<>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.wrapper}>
{" "}
<div className={classes.headerIcon}>
{" "}
<AccountCircleIcon fontSize="large" />
</div>
<div className={classes.innerWrapper}>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
</div>
<Divider />
</div>
</>
);
return (
<nav className={classes.drawer}>
<Hidden lgUp implementation="css">
<Drawer
variant="temporary"
anchor={"left"}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
);
}
有关如何在 CSS 中使用 flexbox 的更多信息,请查看 this 指南。
我正在努力实现下图中的效果。现在,我的图片在上面,而文字在下面。我想实现文字就在图像的右侧。
请检查此代码框 link CLICK HERE
代码
const drawer = (
<div>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.headerIcon}>
<AccountCircleIcon fontSize="large" />
</div>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
<Divider />
</div>
);
这是我的做法。我已经调整了图标右侧的文字。 您可以做进一步的造型:
import React from "react";
import { makeStyles } from "@material-ui/styles";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import "./styles.css";
const headerStyles = {
display: "flex",
justifyContent: "center"
};
const useStyles = makeStyles(theme => ({
root: {
display: "flex"
},
headerTitle: {
...headerStyles,
fontSize: "1.3rem",
cursor: "pointer"
},
headerIcon: {
...headerStyles,
marginTop: "1rem"
},
headerName: {
...headerStyles,
marginTop: "0.2rem"
},
headerRole: {
...headerStyles,
marginTop: "-0.8rem",
marginBottom: "1rem"
},
iconButtons: {
marginLeft: "auto"
},
userName: {
display: "flex",
flexDirection: "row"
}
}));
export default function LoginForm() {
const classes = useStyles();
const drawer = (
<div>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.userName}>
<div className={classes.headerIcon}>
<AccountCircleIcon fontSize="large" />
</div>
<div>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
</div>
</div>
<Divider />
</div>
);
return (
<nav className={classes.drawer}>
<Hidden lgUp implementation="css">
<Drawer
variant="temporary"
anchor={"left"}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
);
}
将 display: "flex"
添加到 children 并没有多大作用。我所做的是在你的图标、名称和角色周围添加了一个包装器 class,具有 display: "flex"
、flexDirection:"row"
、justifyContent: "center"
和 alignItems:"center"
属性。包装器然后所做的是将所有 div 连续“放在”它下面,例如:
<div className="classes.wrapper">
<div>This one is to the left</div>
<div>This one is to the right</div>
</div>
但是,例如,如果我将另外 2 个 div 放在右边的下面,它们将相互堆叠,因为 flexDirection 属性 设置为行 for all children 在包装纸下,但不是为了他们的 children.
<div className="classes.wrapper">
<div>This one is to the left</div>
<div>
<div>This one will be to the right on top</div>
<div>This one will be to the right under</div>
</div>
</div>
我还删除了一些其他内容,但这是代码:
import React from "react";
import { makeStyles } from "@material-ui/styles";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import "./styles.css";
const useStyles = makeStyles(theme => ({
wrapper: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
margin: "0.5rem"
},
innerWrapper: {
display: "flex",
flexDirection: "column",
alignItems: "baseline",
marginLeft: "0.5rem"
},
headerTitle: {
fontSize: "1.3rem",
cursor: "pointer"
},
headerName: {
margin: "0",
fontStyle: "bold",
fontSize: "1rem"
},
headerRole: {
margin: "0",
fontSize: "0.7rem"
},
iconButtons: {
marginLeft: "auto"
}
}));
export default function LoginForm() {
const classes = useStyles();
const drawer = (
<>
<h2 className={classes.headerTitle}>Login</h2>
<Divider />
<div className={classes.wrapper}>
{" "}
<div className={classes.headerIcon}>
{" "}
<AccountCircleIcon fontSize="large" />
</div>
<div className={classes.innerWrapper}>
<h5 className={classes.headerName}>Bake</h5>
<p className={classes.headerRole}>User</p>
</div>
<Divider />
</div>
</>
);
return (
<nav className={classes.drawer}>
<Hidden lgUp implementation="css">
<Drawer
variant="temporary"
anchor={"left"}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
);
}
有关如何在 CSS 中使用 flexbox 的更多信息,请查看 this 指南。