Align the ion content (or text or label) to the center vertically

I am striving to achieve a similar look as shown in the following images:

https://i.sstatic.net/YFMay.png

However, I am currently at this stage:

https://i.sstatic.net/ZvpBV.png

Please note that the first image showcases a bootstrap form, while the second image displays my design using ionic. Although I prefer not to include bootstrap in my ionic project for various reasons, I aim to get it as close as possible to the desired outcome.

My main query is:

  1. How can I vertically center the Item name? [In the second image, I have already attempted using justify-content-center and align-items-center]
  2. How can I align the text of Item name with Apple (similar to the first image)? [I tried using class="ion-float-left", however, whether I apply it or not, the item name remains unchanged in the second image. Additionally, when I place the entire ion-row below the ion-list, it does not look visually appealing.]

Below is the code snippet from my ionic file:

product-list.page.html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Stock</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button (click)=onBackButtonPressed() color="secondary" class="ion-float-right" size="small">
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list *ngIf="currentList">
              <ion-item *ngFor="let item of currentList" (click)="setIonList(item)">
                {{item}}
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
htmlcssangularionic-frameworkionic4

Answer №1

To achieve vertical centering, wrap the <ion-grid> within a <div> element and apply a style of height: 100% to the div. Then, set 

display: flex; align-items: center; justify-content: center;
on the wrapper.

  1. Ensure that only the <div> is affecting the positioning of the <ion-grid>.
  2. Make sure that external factors are not influencing the styling of your <div>.

If there are any conflicts or issues, consider a different approach for implementation.

Visual representation:

https://i.sstatic.net/AR5Dr.png

Below is the relevant code snippet:

  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" > ;
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button  color="secondary" class="ion-float-right" size="small"gt;
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list >
              <ion-item>
                <ion-text>Hi</ion-text>
              </ion-item>
              <ion-item>
                <ion-text>Hello</ion-text>
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>


</div>

Credits:

I received assistance with this question from the Ionic forum:

Special thanks to saad-ansari for their helpful reply.

Answer №2

I'm not very familiar with Ionic, but typically, people use the following CSS to vertically align text in the center:

{
    display: table-cell;
    vertical-align: middle;
}

Alternatively, you can achieve this using:

{
    line-height: 50px; /* assuming the element height is 50px */
}

You could also try adjusting the 'padding-top' property for more control over alignment.

2. To move your content leftwards, simply apply a margin-left, like so:

{ margin-left: 1vw; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enabling a checkbox grid for exclusive rectangular selections

Apologies for the confusing title, I struggled to come up with something more fitting. Let's say my client needs a square area on their homepage where they can upload images that will be placed within various boxes in a grid. The available box optio ...

javascripthtmlmath

Using formArray to dynamically populate data in Angular

I am attempting to showcase the values from a formarray that were previously added. component.ts this.companyForm = this.fb.group({ id: [], company_details: this.fb.group({ ---- }), company_ip_addresses: this.fb.array([this.fb.group({ ...

angularform-controlformarray

What is the best way to showcase a firebase "row" containing two columns within an Ionic 2 application?

Currently in the process of developing an app to keep track of assignments using Ionic 2/Typescript and Firebase as the backend database. The main page displays a list of assignments retrieved from the database. Creating a new assignment requires the user ...

angulartypescriptfirebasefirebase-realtime-databaseionic2

What is the best way to implement media queries for mobile phones and desktop computers?

I've come across similar questions before but still can't wrap my head around it. Here's my dilemma: I want the index page of my website to display in desktop layout on desktops and mobile jquery on mobile devices. Currently, I have set up m ...

javascriptjquerycssjquery-mobile

Unexpected Behavior in Angular 12 Subscriptions

Having developed a ShoppingCart Service in Angular 12 with Firestore as the backend, my objective is to maintain the shopping functionality throughout the application. Upon page load, a method is triggered to check the presence of a "cartId" field in the l ...

angulargoogle-cloud-firestoreservicenullsubscription

When constructing a parameter, providers are unable to resolve another provider

I am currently working on an Ionic v3 app and I have encountered an issue with resolving providers within two other providers. Below is the error message I received: Uncaught Error: Can't resolve all parameters for DialogueMetier:([object Object], [ ...

angulartypescriptionic-frameworkionic3angular-providers

Exploring ways to transform my function into rxjs in Angular

I have successfully implemented a function that is working as intended. Now, I am looking to transform it into an rxjs function with a filter in the rxjs directory. This transformation should involve using both the pipe method and includes method for filte ...

angularrxjs

Angular template src variable issue with no solution in sight

The videoSrc variable is not evaluating correctly images/{{videoSrc}}.mp4 When I write just videoSrc, it works fine. But when I concatenate it with other strings, it doesn't work. Check out this jsfiddle ...

javascripthtmlangularjs

React.js Material UI Dropdown Component

Is it possible to modify the behavior of the dropdown in Material UI Select? I would like to customize the appearance of <ul> so that it does not resemble a pop-up. My goal is for the selected item to be contained within the <li> element, simi ...

htmlcssreactjsmaterial-ui

I have a specific resolution in mind where I want to run jQuery code during window scrolling

I have a jQuery code that I want to run only when the resolution is greater than 950px. If not, I risk losing the responsive logo. My goal is to create a navigation bar similar to the one on the Lenovo homepage. $(document).ready(function(){ //left ...

javascriptjqueryhtmlcss

CSS: Creative ways to switch up background hues within a grid layout

Im working on a project with a similar layout to this https://i.sstatic.net/okRL1.png I am trying to achieve a chessboard effect in my grid layout, where the last element of one row has the same background color as the first element of the next row. I h ...

htmlcssgrid

Adding an active class on a selected chat list item in Angular - here's how!

We are currently developing a chat component where users can click on the left side chat item to open messages with the selected user. We have implemented an active class that changes the color of the selected chat list item. Our goal is to apply the activ ...

angulartypescriptangular6

Looking for an IOS yearly calendar solution for Angular6? Look no further than the angular-calendar-year-view library available at [https://github.com/MariemChaab

Seeking an angular yearly calendar for iOS similar to the one found at [https://github.com/MariemChaabeni/angular-calendar-year-view], designed for use with Angular 7. However, when attempting to integrate it into Angular 6, I encountered error ts1005; e ...

angularangular6

Ways to animate a main element independently of its counterpart's animation

I want to create an animation for a parent element without affecting the child's animation. My HTML & CSS structure is set up as follows: .parent{ background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1be ...

htmlcss

Customizing R Shiny: Changing the color of a menu item upon selection of any submenu item

Seeking assistance with updating the color of the menuitem in a shiny app to match the active submenuitem. Currently, the active submenuitems are highlighted differently from non-active submenuitems, but we want the main menuitem to also change color when ...

cssrshinyshinydashboard

Trouble with JavaScript loading in HTML webpage

<!DOCTYPE html> <html> <head> <title>Breakout Game</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas width="900" height="450" class="canvas"></canvas> ...

javascripthtmlcssdom

Modify the font style of numbers based on the keyboard language selected by the user

Is it possible to change the font family of numbers in input fields based on the user's keyboard language? For example, if the user is typing in Persian, the numbers should be displayed in a Persian font, and when they switch to an English keyboard, t ...

javascripthtmlcssreactjsnext.js

Generating Angular2 CLI components with Angular-Meteor integration

Exploring Angular2 CLI and Meteor has been an interesting journey for me. One thing I've noticed is that when I create a component using Angular2 CLI, integrating it into another module is as simple as including it in the declarations array of that mo ...

angularmeteortypescriptangular-cliangular-meteor

Tips for Importing HTML Table Data Line by Line into SQL Table

I have the following code here. I am looking to insert HTML table data row by row into an SQL database. However, with this current code, only the last row is being stored in the database table. I believe I need to implement a loop to read the data from e ...

phphtmlsql

The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with: Despite trying various methods ...

javascriptcss