I'm currently working on an Angular 2 app using Angular material. I have two buttons labeled "sign in" and "sign up", and I'm trying to add a vertical line between them. Despite looking at various examples online, I haven't been successful in achieving this layout. I want the buttons to be on the same line with a small vertical line separating them. Here is the HTML code I am using:
.textAlign {
text-align: center;
color: white;
position: absolute;
top: 50%;
left: 50%;
/* à 50%/50% du parent référent */
transform: translate(-50%, -50%);
font-family: 'Source Sans Pro';
}
h1 {
font-weight: bold;
}
.image {
width: 100%;
}
.ligne_verticale {
width: 5px;
border-left: 5px solid gray;
height: 70px;
}
.nav-button {
text-align: center;
vertical-align: middle;
border: solid 1px;
border-radius: 5px;
background-color: white;
font-weight: bold;
width: 120px;
margin-right: 10%;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="content">
<div>
<img class="image" src="http://seabramota.com/img/intro-bg.jpg" alt="image
d'accueil">
<div class="textAlign">
<h1>{{ 'PAGEHOME.TITLE' | translate }}</h1>
<br>
<h3>{{ 'PAGEHOME.DESCRIPTION' | translate }}</h3>
<br>
<button mat-button color="primary" class="nav-button" (click)="openConnectDialog()">
{{ 'PAGEHOME.CONNECTBUTTON' | translate }}
</button>
<button mat-button color="primary" class="nav-button" (click)="
openRegisterDialog()">
{{ 'PAGEHOME.INSCRIREBUTTON' | translate }}
</button>
</div>
</div>