I have a title and a button. The title should be left-aligned and the button should be right-aligned. But I have a problem that the button goes up.
How to align title and button on the same line?
.page-header {
margin: -16px -16px 16px;
padding: 16px;
color: $white;
background-color: $red;
}
<header >
<h1>{{title }}</h1>
<span fxFlex></span>
<button mat-icon-button>
<mat-icon>navigate_before</mat-icon>
</button>
</header>
CodePudding user response:
Add this CSS on page-header class:
.page-header {
...;
display: flex;
justify-content: space-between;
align-items: center;
}
CodePudding user response:
Display Method
.page-header {
border: 1px solid black;
}
.display-child-element {
display: inline-block;
vertical-align: middle;
border: 1px solid red;
}
<header >
<h1 >TITLE</h1>
<button >TEST</button>
</header>
Flexbox Method
.flex-parent-element {
display: flex;
border: 1px solid black;
width: 50%;
}
.flex-child-element {
flex: 1;
border: 1px solid red;
}
<header >
<h1 >TITLE</h1>
<button >TEST</button>
</header>
Grid Method
.grid-container-element {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
border: 1px solid black;
width: 50%;
}
.grid-child-element {
margin: 10px;
border: 1px solid red;
}
<header >
<h1 >TITLE</h1>
<button >TEST</button>
</header>