0
120
ViewsSet text on the same y-aligment line
I've been stuck on this problem for hours.
This is my Header.js
<div className="navbar-inner">
<h2>Text1</h2>
<h3>Text2</h3>
</div>
This is my Header.css file:
.navbar-inner {
margin: 0 auto;
color: #fff;
display: flex;
width: 87vw;
background-color: red;
justify-content: space-between;
vertical-align: sub;
}
This is what is shown:
I would like Text1 and Text2 to be aligned on the same y-line:
·
Juan Pablo Isaza
2 answers
Answer question0
You can give flex on h2 and h3 tag.
h2, h3 {
display: flex;
align-items: center;
}
·
Juan Pablo Isaza
Report
0
align-items is what you need for vertically aligning text when using flex box.
I also removed the margin from the h2 and h3 elements (it is there by default).
.navbar-inner {
margin: 0 auto;
color: #fff;
display: flex;
width: 87vw;
background-color: red;
justify-content: space-between;
/* New styles */
align-items: flex-end;
padding: 5px;
}
h2, h3 {
margin: 0;
}
You will probably need to adjust the padding to align it how you actually want it in terms of how close the text should be to the edges.
·
Juan Pablo Isaza
Report
Answer question