时间戳

首页 > 解决方案 > 我将如何使用 CSS 将以下按钮居中对齐

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

问题描述

如何使用 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>

标签： htmlcss

解决方案

使用下面的代码在中心做链接：

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

推荐阅读