How to center align ion icon inside button?

Tags: html,css,ionic-framework

Problem :

I have this html structure:

<ion-view view-title="Items">

<div class="card">
    <a href="#/app/item1" class="item item-text-wrap item-button-left">
        <button class="button circle text-center">
            <i class="ion-crop"></i>
        Item 1

<div class="card">
    <a href="#/app/item2" class="item item-text-wrap item-button-left">
        <button class="button circle text-center">
            <i class="ion-social-buffer"></i>
        Item 2


And I've added this custom css:

.circle {
    background-color: #00f;
    border-radius: 100%;
    border: 1px solid #00f;
    width: 50px!important;
    height: 50px;
    color: #fff;
.circle i {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

But it displays this way:

enter image description here

How can I do the cards to take the correct height and the ion-icons to the button's center?

Thanks for your time.

Solution :

You can either set text-align to center and line-height to 50% or try this:

.circle {
    background: blue;
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 100%;

.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    display: block;
    background: red;


    CSS Howto..

    How to assign CSS to mobile page in

    How to switch “controlgroup” background color

    How to prevent mobile browser micro-shrinking HTML block level elements?

    How to display an HTML list non-nested?

    CSS menu list items need to show inside div container

    how to create an alphabet letter selector that spans an entire div width

    My entire text in aspx page font be in arial. How to change it in css [closed]

    How to include a non-standard font-face in azure?

    How to style a button inside asp dropdown

    How to convert shorthand CSS to longhand?

    How to enable background printing by default using css or javascript?

    How do I use a wildcard asterisk CSS selector in SASS? [closed]

    How i can make a dynamic css class without use of id?

    How to add new table rows and columns with table headers to css table

    How do I make a class/div behave like it were floating?

    How can I set a Horizontal! scroll bar for my Github page under this bootstrap theme? [closed]

    How to change the CSS of entire page/website on click?

    How to increase a counter variable after a callback of a setTimeout-function?

    How to set overflow content to go underneath instead of fitting in one row

    How do I change my link's image on click?

    How to create two CSS transitions in parallel on nested elements

    Slideshow image with buttons

    How to adapt website to user's Screen Resolution?

    How to stretch div height to fill parent div - CSS

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How to display a tree in HTML/CSS? nested left-floating divs and wrapping

    How can I get a button on the side of a text box to be perfectly aligned all the time?

    How to set icon of an page using CSS

    How to apply a drop shadow on a triangle in CSS?

    How can I change opacity of an image in css without disturbing the overwritten text's opacity