如何在反应中将项目居中

Question

我为引用创建了一个导航栏，目前正在格式化页面，我对反应还很陌生，所以我尝试从基础知识开始。我被困在如何将我的 NavBarLinks 居中，我已经使用文本中心和位置来使链接位于导航栏的中心，但如果我使网络浏览器变小，它就不会停留在中心。我的问题是在反应中将项目居中的权利是什么。

import React, { useState } from "react";
import {
  NavbarContainer,
  TopContainer,
  BottomContainer,
  NavbarExtendedContainer,
  NavbarInnerContainer,
  NavbarLinkContainer,
  NavbarLink,
  Logo,
  OpenLinksButton,
  NavbarLinkExtended,
} from "../styles/Navbar.style";
import LogoImg from "../assets/logo.png";

function Navbar() {
  const [extendNavbar, setExtendNavbar] = useState(false);

  return (
    <NavbarContainer extendNavbar={extendNavbar}>
      <NavbarInnerContainer>
        <TopContainer>
          <NavbarLinkContainer>
            <OpenLinksButton
              onClick={() => {
                setExtendNavbar((curr) => !curr);
              }}
            >
              {extendNavbar ? <>&#10005;</> : <> &#8801;</>}
            </OpenLinksButton>
            <Logo src={LogoImg}></Logo>
          </NavbarLinkContainer>
        </TopContainer>
        <BottomContainer>
        <NavbarLinkContainer>
        <NavbarLink to="/"> Home</NavbarLink>
            <NavbarLink to="/products"> Products</NavbarLink>
            <NavbarLink to="/contact"> Contact Us</NavbarLink>
            <NavbarLink to="/about"> About Us</NavbarLink>
        </NavbarLinkContainer>
        </BottomContainer>
      </NavbarInnerContainer>
      {extendNavbar && (
        <NavbarExtendedContainer>
          <NavbarLinkExtended to="/"> Home</NavbarLinkExtended>
          <NavbarLinkExtended to="/products"> Products</NavbarLinkExtended>
          <NavbarLinkExtended to="/contact"> Contact Us</NavbarLinkExtended>
          <NavbarLinkExtended to="/about"> About Us</NavbarLinkExtended>
        </NavbarExtendedContainer>
      )}
    </NavbarContainer>
  );
}

export default Navbar;

样式页

import styled from "styled-components";
import { Link } from "react-router-dom";

export const NavbarContainer = styled.nav`
  width: 100%;
  background-color: black;
  @media (min-width: 700px) {
    height: 80px;
  }
`;

export const TopContainer = styled.div`
  padding-left: 5%;
`;

export const BottomContainer = styled.div`
  padding-right: 50px;
  background-color:salmon;
`;

export const NavbarInnerContainer = styled.div`
  width: 100%;
  height: 80px;
`;

export const NavbarLinkContainer = styled.div`
  display: flex;
`;

export const NavbarLink = styled(Link)`
  color: white;
  font-size: x-large;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  left: 43%;
  top:10%;
  text-decoration: none;
  margin: 10px;
  height: 30px;
  text-align: center;
  @media (max-width: 700px) {
    display: none;
  }
`;

export const NavbarLinkExtended = styled(Link)`
  color: white;
  font-size: x-large;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  margin: 10px;
`;

export const Logo = styled.img`
  @media (min-width: 700px) {
    margin: auto;
  }
  margin: 10px;
  max-width: 180px;
  height: auto;
`;

Answer 1

我真的不建议为 css 使用完全不同的页面，而只需将代码添加到 index.css，从那里您可以访问您的 css > 来自 react 应用程序中的任何组件。

为了使 NavbarLink 居中，您可以使用 flexbox。

在 index.css 中创建一些 css 代码：

.navbar__link {
  width: 100%
  display: flex;
  justify-content: center;
}

并将该 class 添加到您的 component 元素 中：

<NavbarLinkContainer className='navbar__link'>
  <NavbarLink to="/"> Home</NavbarLink>
  <NavbarLink to="/products"> Products</NavbarLink>
  <NavbarLink to="/contact"> Contact Us</NavbarLink>
  <NavbarLink to="/about"> About Us</NavbarLink>
</NavbarLinkContainer>