如何将按钮相对于顶部的另一个按钮居中

Question

我喜欢将按钮放在上方的按钮中心。 如图所示，下方的按钮不居中。

我试过

.btn {
  padding: 16px 22px;
  color: #fff;
  border-radius: 4px;
  position: relative;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.15);
  border: none;
  text-transform: uppercase;
}

.btn-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-common {
  background: #3498db;
}

.btn-xs {
  border-radius: 0px;
  font-size: 12px;
  line-height: 1.5;
  padding: 1px 5px;
}

<div class="col-md-2">
  <div class="pull-right">
    <button class="btn btn-common btn-xs" ng-click="currecnySuggestion(room)"><i class="fa fa-save"></i> Book without payment</button>
    <button class="btn btn-common btn-xs btn-center" ng-click="currecnySuggestion(room)"><i class="fa fa-save"></i> Book with payment</button>
  </div>
</div>

Answer 1

如果您指定pull-right的宽度（显式地，或通过执行display: inline-block之类的操作以使包装器缩小以适合元素），并向margin: auto添加btn-center public void ConfigureServices(IServiceCollection services) { services.AddCors(options => { options.AddPolicy("AllowAllHeaders", builder => { builder.AllowAnyOrigin() .AllowAnyHeader() .AllowAnyMethod(); }); }); . . . } ，它应该有用。

jsfiddle