两个按钮之间的垂直线

Question

我正在开发一个带角度材料的角度2应用程序.我有两个按钮登录并注册我想要两个按钮之间的垂直线; 我在不同的网站上看到了很多例子,但它不起作用.我希望按钮在同一条线上(内联,并在它们之间有一条小垂直线).这是html代码:

.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>

Answer 1

那样的东西？

.container {
  display: flex; 
  width: 100%;
  justify-content: center;
}

button {
  background: #99A3FF;
  color: white;
  border: 0;
  padding: 6px 12px;
  border-radius: 2px;
}

.button-container {
  padding: 12px 24px;
}

.button-container:not(:last-child) {
  border-right: 1px solid #ddd;
}

<div class="container">
  <div class="button-container"><button>Register</button></div>
  <div class="button-container"><button>Log In</button></div>
</div>