>source

저는 ReactJS로 코딩 중입니다. 내 홈페이지의 하단 NavBar와 콘텐츠가 있습니다. 내 홈페이지의 콘텐츠가 하단 탐색 모음을 기준으로 중앙에 오도록 하고 싶습니다. 나는 두 형제를 위해 그것을 달성하는 방법을 깨닫지 못합니다.

const HomeLogo= ()=> {
  return (
    <Container className="homeLogo">      <Row className="d-flex justify-content-center">        <Image src={logo}/>      </Row>    </Container>  );
};

export const Home= ()=> {
  return (
    <>      <HomeLogo />      <NavBar />    </>  );
};

이것은 내 CSS입니다:

.homeLogo {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

로고의 상하 길이가 같도록 하고 싶습니다. 이미지를 참조하십시오

  • 답변 # 1

    HTML 및 CSS(샌드박스 code에서):

    home.js에서 div의 세 개를 래핑합니다.

    <div className="parent">  <div className="content">  <HomeContent />  <HomeContent />  <HomeContent />  </div>  <NavBar /></div>

    NavBar.js에서 다음 클래스를 추가합니다.

    <Navbar className="nav" bg="dark" variant="dark" fixed="bottom">

    마지막으로 app.css에서:

    .parent {
      background-color: darkcyan;
      height: 100%;
      width: 100%;
      position: absolute;
    }
    .nav{
      height: 10%;
    }
    .content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 90%;
      background-color: red;
    }
    

  • 답변 # 2

    이 문제가 해결되기를 바랍니다. 아래 code를 따르세요. 나는 샌드박스 code 링크를 공유합니다. 샌드박스 code라이브 데모를 볼 수 있습니다

    import Navbar from "./Navbar/Navbar";
    import HomeLogo from "./HomeLogo/HomeLogo";
    const Home= ()=> {
      return (
        <>      <HomeLogo />      <Navbar />    </>  );
    };
    export default Home;
    const HomeLogo= ()=> {
      return (
        <div className="container">      <div className="home-content">Home Logo Here</div>    </div>  );
    };
    export default HomeLogo;
    const Navbar= ()=> {
      return <div className="navbar">Bottom Navbar</div>;
    };
    export default Navbar;
    

    * {
      margin: 0;
      padding: 0;
    }
    body {
      font-family: sans-serif;
      text-align: center;
    }
    .container {
      background-color: red;
      height: 100%;
      position: relative;
      height: 100vh;
    }
    .home-content {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .navbar {
      height: 50px;
      background-color: lightblue;
      text-align: center;
      line-height: 50px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 222;
    }
    

    당신의 응답을 주셔서 감사합니다. 하지만 React-Bootstrap 종속성을 사용하고 있습니다. 그리고 수정 사항은 React-Bootstrap에 적용되지 않습니다.

    rd Cazu2022-01-15 17:09:13

    code에 대한 샌드박스 링크는 다음과 같습니다.

    rd Cazu2022-01-15 02:24:14

    알겠습니다. 해결해 보겠습니다. 감사

    Sujon Hossain2022-01-15 03:23:33

    나는 당신이 그러한 해결책을 기다리고 있기를 바랍니다. 귀하의 code를 업데이트합니다: codesandbox.io/s/dysbf.

    Sujon Hossain2022-01-15 03:58:13

    내 목표는 페이지의 콘텐츠도 세로로 가운데에 맞추는 것입니다. 따라서 이미지가 하나만 있는 경우 해당 이미지는 하단 탐색 모음 위의 사용 가능한 공간에서 수직 및 수평 중앙에 있어야 합니다.

    rd Cazu2022-01-15 05:03:21
  • 이전 java : 아래의 sonarqub 문제를 어떻게 고칠 수 있습니까?
  • 다음 Python: TypeError: 목록("int" 아님)만 목록에 연결할 수 있습니다. 데이터 유형 및 numpy 관련 문제