홈>source

css : 형제를 기준으로 요소를 중앙에 배치

저는 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%);
}

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

cssreactjswebfrontend
  • 답변 # 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 관련 문제