Links do not centre as required - html

Question

I'm having trouble aligning "buttons" in my pages, which are actually just text links that are made to look like buttons using CSS. It is used within an unordered list (see HTML below).
The responsible CSS code is here:
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; }
With the following HTML Code (I've cut out unnecessary text information as seen in the image below) :
<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>
And renders in a mobile device like this where the button is not centred.
Here's a screenshot:
Any insight and help will be much appreciated.
This is the full HTML code I've used:
<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>

Answer 1

On the li, with the button, set text-align:center and float:none.

Answer 2

Take out from ul.cms li the width: 24.99%; and float: left;

Answer 3

Set the width of li to 100%. I did it inline, but you can do it in the external css itself.
<ul class="cms clearfix">
<li style="width: 100%">
<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>
fiddle: http://jsfiddle.net/nuxbox/LhDKb/

Answer 4

Not sure where the problem comes from, text-align:center on the li should center all inline-block elements inside. Could you show the full HTML structure? Maybe there is something between has-icon and ja-typo-btn?

Answer 5

On the li add position:relative and on the button use position:absolute; top:0; left:50%; that should help you out.

Answer 6

In your CSS you are trying to apply margin twice:
ul.cms .has-icon {
margin: auto; /* once here */
display: block;
background-position: center top;
background-repeat: no-repeat;
padding-top: 140px;
margin: 0px 8px; /* again here */
}
Try this:
ul.cms .has-icon {
margin: 0 auto; /* center button, change 0 to 5-10 if you want some margin top and bottom */
display: block;
background-position: center top;
background-repeat: no-repeat;
padding-top: 140px;
}