为页脚建立一个正确的对齐方式

Question

我只是检讨一个页脚，让它更好地使用不同的UI框架。我试着对齐它，但它没有正常工作。右侧不是是重叠的。我尝试使用 <div> 并应用样式来设置不同的元素。

我遇到的问题是文本 Follow 按钮后面的文字需要与图标对齐，图片、输入框、按钮和文字 "关注 "及图标必须单行对齐，并在页面中间居中。

第二行的版权文字要正确对齐

我尝试了不同的组合，但还是没有做好

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

Answer 1

你可以试试这个。

我加了 justifyContent: "center"

      followDesc:{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginLeft: theme.spacing(2),
        margin: "auto",
      },

哦，你需要摆脱 margin 在...上 p 元素。

尝试在某处添加。

p { margin: 0 } 或者改变 p 到 div 元素

编辑 =====

要像上面一样复制它做2件事。

增加 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>