为页脚建立适当的对齐方式

Question

我只是检查了一个页脚，以使用不同的 UI 框架使其变得更好。我尝试对齐它，但它无法正常工作。右侧不是重叠的。我尝试使用 <div> 并应用样式来设置不同的元素。

我遇到的问题是按钮后面的文本 Follow 需要与图标对齐，图像、输入表单、按钮和文本 '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",
      },

哦，您需要删除 p 元素上的 margin。

尝试在某处添加：

p { margin: 0 } 或将 p 改为 div 元素

编辑=====

像上面那样复制它做两件事

在此处添加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>

为页脚建立适当的对齐方式

build a proper alignment for a footer

css

footer

reactjs

material-ui