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 hide text using CSS?

    How do I make these HTML blocks of info stay the same size?

    How to use absolute positioning without overlap effect

    How to dim an image keeping transparency untouched with CSS or JS?

    How to manipulate SVG element style with javascript?

    How to deploy a jekyll site locally with css, js and background images included?

    CSS how to vertical align div in a div against a sibling div (inline-block)

    HTML5/CSS3 how to force text to require a certain width for rendering

    How to style text in JQuery?

    How to apply css style for HTML element using Mootools

    drawing a image like shown

    WordPress: How to style Title and Excerpt in Display Post Shortcode Plugin

    How to check a website in BlackBerry Simulator

    On textbox focus, how can you change the background color of the element prior to it with only CSS?

    How can I resize these divs while keeping the same layout?

    How to optimize this css code? [closed]

    How to vertically align middle some header text between 2 header images on a website?

    How can I animate my div to go from top to bottom whithout interfering with the content inside?

    CSS: How to override a class style with an enclosing div

    how can i create true loop?

    How can I make a background image of a site start off fitting to screen and then zoomable?

    html / css / pre / code: how to force carriage return

    How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

    How to conditionally render CSS and JavaScript inside head element of an HTML

    How to change the font family of Highchart to Bootstrap css default font family

    How do I achieve a fully working image scrolling effect like in this example?

    How to disable selection with specific class with js/css?

    How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?

    How to get row of floated images inside a div element to resize with browser window

    How can
    's with 100% width, yet discrepancies in mobile browsers, be combatted?