Centering an element relative to its sibling

user_17929943 0
Viewed 76

I am coding in ReactJS. I have a bottom NavBar and contents of my homepage. I want the content of my homepage to be centered relative to the bottom navigation bar. I fail to realize how to achieve that for two siblings.

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

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

This is my CSS:

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

I want the top and bottom of the logo to be of equal length. Please see image 1

Here is the Sandbox link for the code:

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

reactjs frontend css
2 Answers

I hope you solve this problem please follow below code; I am share sandbox code link Sandbox Code you can see live demo

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

Do some changes in the HTML & CSS (in the sandbox code):

In the home.js wrap any three in a div:

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

In the NavBar.js, add this class:

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

Finally, in the 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;
}

enter image description here

user_170071840
Related