Align button with text

I’m trying to align a button with review information but failing to do so for the moment.


This is my HTML code. There is an ion-list wrapping the ion-grid so ion-item contains an ng

        <ion-grid no-padding>
            <ion-item text-wrap *ngFor="let item of [1, 2, 3]">
                    <ion-col width-40>
                        <img [src]="imageSrc">

                    <ion-col width-60>
                        <h2 class="topName">{{name}}</h2>

                        <ion-col class="bottomReviews" width-50>
                            <p> 10 Reviews</p>

                        <ion-col class="bottomReviews" width-50>
                            <button class="bottomShare" clear small>
                                <ion-icon name='share-alt'></ion-icon>
                                <label text-capitalize>Share</label>


And this is my CSS

    .bottomReviews {
        position: absolute;  //This is positioned relative to the nearest positioned ancestor
        bottom: 15px;
    .topName {
        position: absolute;  //This is positioned relative to the nearest positioned ancestor
        top: 15px;
        font-size: 110%;
    //To take out the padding in ion-label stored within ion-item
    ion-grid > ion-item.item > div.item-inner > div.input-wrapper > ion-label {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    //To take out the padding in ion-col
    ion-label > ion-row > ion-col {
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 0px;
        padding-left: 5px;

Edit: I was able to align everything by using ion-row, ion-col and taking out all the position: absolute;

Same question with this one:


How would you align the edit button with the title?

Here’s the html code

    <button clear>
        <ion-icon name='share-alt'></ion-icon>
        <label text-capitalize>Edit</label>

Vertical align resolve this issue?

Thanks for the suggestion.

It didn’t work :pensive:

Check out the following article: An In Depth Look at the Grid System in Ionic 2. It contains some examples of how to use the Ionic grid system. Maybe it will help you.

Thanks for the link but I’ve already read it. I’ve applied it to align the two bottom buttons (review and share) but I don’t know how to align Edit button with the text.

I guess that you’ll have to resort to manually crafted CSS in this case.