I'm building a React app and I want to build a navigation bar. However, I can't align the elements in the nav bar in the middle. You can see it in the image below:
I've tried to add: margin-bottom: 30px
but nothing worked:
Here is my react code:
return (
<>
<div className='home-bar'>
<div className="home-bar-links">
<p>Mathly</p>
</div>
</div>
</>
);
and here is my css:
.home {
position: relative;
width: 100%;
min-height: 100px;
}
.home-bar {
margin-top: 0;
padding: 1rem;
height: 7vh;
position: sticky;
display: flex;
flex-direction: row-reverse;
background-color: #D9B99B;
border-bottom-left-radius: 30%;
overflow: hidden;
}
.home-bar-links {
display: inline-block;
font-weight: 600;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.5rem;
margin-bottom: 150px;
}
CodePudding user response:
For vertical alignment, just add align-items: center;
to your home-bar CSS. Then remove margin-bottom: 150px;
from your home-bar-links CSS, like so:
.home {
position: relative;
width: 100%;
min-height: 100px;
}
.home-bar {
margin-top: 0;
padding: 1rem;
height: 7vh;
position: sticky;
display: flex;
flex-direction: row-reverse;
align-items: center;
background-color: #D9B99B;
border-bottom-left-radius: 30%;
overflow: hidden;
}
.home-bar-links {
display: inline-block;
font-weight: 600;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.5rem;
/* margin-bottom: 150px; */
}
<div class='home-bar'>
<div >
<p>Mathly</p>
</div>
</div>
Note that align-items
controls the alignment of items on the cross axis (which, in this case, is the vertical axis, as your flex-direction is set to row, which makes the horizontal axis the main axis).