Two buttons in center horizontally

Ionic Framework ionic-v3
1

How to align two buttons in the middle of page horizontally? I know its simple but everything that works for me in normal CSS doesn’t work in Ionic.

2

Thats strange that CSS doesn’t work for you. How do you set the classes in HTML and CSS ?

3

I am trying to use margin-left: X% but it works differently on different resolutions

4

I just found a simple code wich should work.

HTML:

<div class="hbuttons">
<a href="http://www.cssdrive.com">Home </a> <a href="http://www.cssdrive.com/index.php/main/submit/">Submit </a> <a href="http://www.cssdrive.com/index.php/main/resources/">Resources </a> <a href="http://www.cssdrive.com/index.php/main/contact/">Contact </a>
</div>
<div style="clear: left;"></div>

CSS:

.hbuttons a{
display: block;
text-decoration: none;
font: bold 13px Arial;
color: black;
width: 78px;
height: 23px;
float: left;
display: inline;
margin-right: 8px;
background-image:url(tabsquare.jpg);
background-repeat: no-repeat;
padding-top: 4px;
text-align:center;
}

.hbuttons a:hover{
background-image:url(tabsquareover.jpg);
}

Try it out :smile_cat:

5

this isn’t working for me

6

That is strange it works for me, are you sure that you installed all your components the right way ?

Whats your Ionic info ?

7

Really weird, now it works with just the: text-align: center; in container class, maybe there was a problem with CSS reloading on save