build a proper alignment for a footer

天涯浪子 提交于 2020-06-23 08:15:14

问题


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


回答1:


can you try this:

I added justifyContent: "center"

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

oh and you need to get rid of margin on the p element.

try adding somewhere:

p { margin: 0 } or change the p to a div element instead

edit =====

to replicate it like the above do 2 things

add minWidth: 75px in here:

  textFollow: {
    fontSize: "14px",
    fontWeight: "bold",
    textAlign: "center",
    color: "#ff7255",
    fontFamily: "Source Sans Pro",
    minWidth: '75px'
  },

and move this line: <Button className={styles.whiteButton}> join</Button> underneath this line: <div className={styles.followDesc}>

so it looks like this:

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


来源:https://stackoverflow.com/questions/62298224/build-a-proper-alignment-for-a-footer

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!