如何使用CSS将以下按钮居中对齐

Question

如何使用CSS将以下按钮在Webapp上居中对齐？

  <a href="#carbcounter" class="ui-btn ui-btn-inline ui-corner-all">The Carb Counter</a>
  <a href="#add&delete" class="ui-btn ui-btn-inline ui-corner-all">Add & Delete Produce</a>`
  `<a href="#Login" class="ui-btn ui-btn-inline ui-corner-all" data-icon="action">Log in to the Blog</a>

Answer 1

使用以下代码在中间进行链接：

.btn-outer{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.btn-outer a{
  text-decoration: none;
  margin: 10px 0;
}

<div class="btn-outer">
  <a href="#carbcounter" class="ui-btn ui-btn-inline ui-corner-all">The Carb Counter</a>
  <a href="#add&delete" class="ui-btn ui-btn-inline ui-corner-all">Add & Delete Produce</a> 
  <a href="#Login" class="ui-btn ui-btn-inline ui-corner-all" data-icon="action">Log in to the Blog</a>
  </div>