How do I center this text?

ionic-v1
1

I am modifying some code from here:
CodePen Navigation and Tabs

In the HTML I added this:

<ion-nav-buttons side="right">
    <div class="next-button">
        <a class="button button-clear" href="#/tab/facts">
            <div class="next-text">Next</div>
        </a>
    </div>
  </ion-nav-buttons>

Then in the CSS I added this:

.next-button {
    /*border-color: rgba(255,0,0,0) !important;*/
    width: 55px;
    background: rgba(255,0,0,1) !important;
    border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    overflow:hidden !important;
}
.next-text {
    margin: 0px auto;
    text-align: center;
    color: #ffffff;
}

No matter how I change next-text is is never centered unless I use absolute positioning, which I’d rather not do because there are several different sized buttons and text lengths I will be adding later.

image

Admittedly I’m still somewhat new to HTML/CSS, but I’ve done all the codecademy tutorials and continue to do more on different sites every day.

2

Success!

I moved text-align to the next-button CSS and it worked.