相对于其同级元素居中

Question

我正在用 ReactJS 编码。我有一个底部导航栏和我主页的内容。我希望主页的内容相对于底部导航栏居中。我没有意识到如何为两个兄弟姐妹实现这一目标。

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

这里是代码的沙盒link：

https://codesandbox.io/s/long-wood-4tzin?file=/src/components/Home.js

Answer 1

希望你能解决这个问题，请按照下面的代码；我正在分享沙盒代码 link Sandbox 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;
}

Answer 2

对 HTML 和 CSS（在沙盒代码中）进行一些更改：

在 home.js 中将任意三个包裹在 div:

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

在 NavBar.js 中添加 class:

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

相对于其同级元素居中

Centering an element relative to its sibling

css

frontend

reactjs