为页脚建立适当的对齐方式 [英] build a proper alignment for a footer
问题描述
我只是回顾了页脚，以使用其他UI框架使其变得更好。我尝试将其对齐，但无法正常工作。右侧不重叠。我尝试使用< div> 并应用样式来设置其他元素。
I just review a footer to make it better using a different UI framework. I try to align it but it's not properly working. The right side is not is overlapping. I tried using <div> and apply the style to set up a different element.
我遇到的问题按钮后面的文本跟随是否需要与图标对齐，并且图像，输入表单，按钮和文本跟随和图标必须对齐在一行中，
The issue I have is the text Follow behind the button need to be aligned with the icons and the image, input form, button and text 'Follow' and icons must be aligned in one single line and centred in the middle of the page.
第二行的版权文本正确对齐
The copyright text on the second line is properly aligned
我尝试了不同的组合，但仍然无法正确完成
I tried different combination but still not properly done
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Toolbar, Button } from '@material-ui/core';
import AppBar from '@material-ui/core/AppBar';
import VillageLogo from '../assets/images/village-logo.svg';
import InputBase from '@material-ui/core/InputBase';
import TextContents from '../theme/TextContents';
import FacebookIcon from '@material-ui/icons/Facebook';
import TwitterIcon from '@material-ui/icons/Twitter';
import InstagramIcon from '@material-ui/icons/Instagram';
import LinkedInIcon from '@material-ui/icons/LinkedIn';
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
boxShadow: "none",
backgroundColor: "#ffffff",
marginTop: theme.spacing(3)
},
logo: {
width:"214px",
height:"28px",
marginLeft: theme.spacing(20),
marginRight: theme.spacing(3)
},
subscribe: {
display: "flex",
position: 'relative',
borderRadius: "21px",
backgroundColor: "#f4f7f8",
marginRight: theme.spacing(2),
marginLeft: theme.spacing(3),
width: "467px",
height: "40px",
// [theme.breakpoints.up('sm')]: {
// marginLeft: theme.spacing(3),
// width: 'auto',
// },
},
inputRoot: {
color: "#cecece",
fontFamily: "Source Sans Pro",
fontSize: "18px"
},
inputInput: {
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
width: "467px",
// [theme.breakpoints.up('md')]: {
// width: '20ch',
// },
},
whiteButton:{
borderRadius: 21,
fontSize: '14px' ,
fontWeight: "bold",
textAlign: "center",
color: "#ff7255",
boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
paddingTop: "5px",
paddingBottom: "7px",
paddingLeft: "20px",
paddingRight: "20px",
backgroundColor: "#ffffff",
borderColor: "#ffffff",
fontFamily: "Source Sans Pro",
},
textFollow:{
fontSize: '14px' ,
fontWeight: "bold",
textAlign: "center",
color: "#ff7255",
fontFamily: "Source Sans Pro",
},
textCopy:{
fontSize: '14px' ,
fontWeight: "bold",
textAlign: "center",
color: "#ff7255",
fontFamily: "Source Sans Pro",
},
socialIcon:{
width: '18px',
height:'18px',
color: '#ff7255'
},
followDesc:{
display: "flex",
alignItems: "center",
marginLeft: theme.spacing(2),
margin: "auto",
},
footerMenu:{
display: "flex",
position: 'relative'
}
}));
function Footer(){
const styles = useStyles();
return (
<div className={styles.root}>
<AppBar position="static" className={styles.root}>
<Toolbar>
<img src={VillageLogo} alt="logo" className={styles.logo}/>
<div className={styles.footerMenu}>
<div className={styles.subscribe}>
<InputBase
placeholder={TextContents.SearchPlaceHolder}
classes={{
root: styles.inputRoot,
input: styles.inputInput,
}}
inputProps={{ 'aria-label': 'subscribe' }}/>
<Button className={styles.whiteButton}> {TextContents.Join}</Button>
</div>
<div className={styles.followDesc}>
<p className={styles.textFollow}>{TextContents.Follow}</p>
<FacebookIcon className={styles.socialIcon}/>
<TwitterIcon className={styles.socialIcon}/>
<InstagramIcon className={styles.socialIcon}/>
<LinkedInIcon className={styles.socialIcon}/>
</div>
</div>
</Toolbar>
<div>
<p className={styles.textCopy}>{TextContents.Copyright}</p>
</div>
</AppBar>
</div>
);
}
export default Footer
推荐答案
您可以尝试以下方法吗：
can you try this:
我添加了 justifyContent： center
followDesc:{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginLeft: theme.spacing(2),
margin: "auto",
},
哦，您需要摆脱<$ c $上的保证金 c> p 元素。
oh and you need to get rid of margin on the p element.
尝试添加某处：
p {保证金：0} 或将 p 更改为 div 元素
edit =====
edit =====
要像上面那样复制它，做两件事
to replicate it like the above do 2 things
在此处添加 minWidth：75px ：
textFollow: {
fontSize: "14px",
fontWeight: "bold",
textAlign: "center",
color: "#ff7255",
fontFamily: "Source Sans Pro",
minWidth: '75px'
},
并移动以下行：< Button className = {styles.whiteButton}>这行下面的join< / Button> ：< div className = {styles.followDesc}>
所以看起来像这样：
<div className={styles.followDesc}>
<Button className={styles.whiteButton}> join</Button>
<p className={styles.textFollow}>Follow us</p>
<FacebookIcon className={styles.socialIcon} />
<TwitterIcon className={styles.socialIcon} />
<InstagramIcon className={styles.socialIcon} />
<LinkedInIcon className={styles.socialIcon} />
</div>
这篇关于为页脚建立适当的对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
