我在对齐页面中的“按钮”时遇到问题，这些按钮实际上只是使用 CSS 制作的看起来像按钮的文本链接。它在无序列表中使用（参见下面的 HTML）。
负责的 CSS 代码在这里：
ul.cms {
width: 85%;
margin: 0px auto !important;
text-align: center;
}
ul.cms li {
width: 24.99%;
float: left;
background: none !important;
padding: 0px !important;
margin: 0px ;
text-align: center;
color: #666
}
ul.cms .has-icon {
margin: auto;
display: block;
background-position: center top;
background-repeat: no-repeat;
padding-top: 140px;
margin: 0px 8px;
}
a.ja-typo-btn {
display: inline-block;
text-decoration: none;
white-space: nowrap;
border: none;
color: #333;
background: none;
text-align: center;
}
a.ja-typo-btn:hover,
a.ja-typo-btn:active,
a.ja-typo-btn:focus {
border: none;
background-position: bottom;
color: #333;
}
a.ja-typo-btn-big {
text-align: center;
border: none;
font-size: 110%;
line-height: normal;
font-weight: normal;
}
a.ja-typo-btn-big span {
padding: 15px 23px;
border: none;
display: inline-block;
text-align: center;
}
a.btn-green { background-color: #74af57 !important; border: none; }
a.btn-green:hover,
a.btn-green:active,
a.btn-green:focus { border-color: #74af57; color: #fff; }
a.btn-green span { border: none; }
使用以下 HTML 代码（如下图所示，我已经删除了不必要的文本信息）：
<ul class="cms clearfix">
<li>
<a class = "has-icon icon1"
href = "barista-course-melbourne/espresso-basics"
target = "_parent"></a>
<a class = "ja-typo-btn btn-green ja-typo-btn-big btn-big-green"
href="barista-course-melbourne/espresso-basics"
target="_parent"
style="text-align: center; display: inline-block;">
<span>COURSE INFO</span>
</a>
</li>
</ul>
并在按钮不居中的移动设备中呈现。
这是一个屏幕截图：
任何见解和帮助将不胜感激。
这是我使用的完整 HTML 代码：
<div style="display: block;">
<p> </p>
<ul class="cms clearfix">
<li>
<a class="has-icon icon1" href="barista-course-melbourne/espresso-basics" target="_parent">
</a>
<h4>LEVEL 1</h4>
<h4>Espresso Basics</h4>
<br />
<h4>3 hours - $99</h4>
<span>An introductory barista course where you will learn fundamental barista skills.</span>
<a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/espresso-basics" target="_parent">
<span> COURSE INFO </span>
</a>
</li>
<li>
<a class="has-icon icon2" href="barista-course-melbourne/latte-art" target="_parent">
</a>
<h4>LEVEL 2</h4>
<h4>Latte Art</h4>
<br />
<h4>2 hours - $150</h4>
<span>Learn to pour like a pro. You will learn to pour rosettas, hearts and tulips. </span>
<a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/latte-art" target="_parent" style="text-align: center;">
<span> COURSE INFO </span>
</a>
</li>
<li>
<a class="has-icon icon3" href="barista-course-melbourne/advanced-barista-training" target="_parent">
</a>
<h4>LEVEL 3</h4>
<h4>Advanced Barista</h4>
<br />
<h4>3 hours - $250</h4>
<span>Do you have what it takes to become a top barista? Take your career to the next level! <br />
</span>
<a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/advanced-barista-training" target="_parent" style="text-align: center;">
<span> COURSE INFO </span>
</a>
</li>
<li>
<a class="has-icon icon4" href="barista-course-melbourne/home-barista-training" target="_parent"></a>
<h4>HOME</h4>
<h4>Barista Classes</h4>
<br />
<h4>Various Classes</h4>
<span>Take a range of our home barista classes in the comfort of your own home.<br /></span>
<a class="ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue" href="barista-course-melbourne/home-barista-training" target="_parent" style="text-align: center;">
<span> LEARN MORE </span>
</a>
</li>
</ul>
<div class="button-avartar clearfix">
<p> </p>
<p style="text-align: center;"> {modal href="barista-course-melbourne/index.php?tmpl=component&id=2333" class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red"}
<span>Upcoming Barista Course Dates</span>
{/modal}
</p>
<p> </p>
</div>