steps for centering an image on an ionic page

Is there a way to center an image (logo) both horizontally and vertically on the page?

<ion-view hide-nav-bar="true">
<ion-content class="backgound-red ">
<section class = "home-container">
      <div class="row icon-row">

        <div class="col">
                    <h1 class="text-white text-center">My Application </h1>
          <h4 class ="text-white text-center ">version 1.0.0</h4>
        </div>
    </div>

    <div class="row row-center" >
        <div class="col text-center" >
            <img alt="Logo" height="100" src="img/logo.png" >
        </div>
      </div>
    <div class="row icon-row">

        <div class="col ">
            <a class="text-white text-center" href="#" onclick="window.open('http://members.000webhost.com/login.php?'); return false;">
              <h5 class ="text-white text-center ">access server</h5></a>
        </div>        
    </div>
    </section>
</ion-content>

The desired layout includes the automatic center alignment of the image on mobile screens (tablets, phones).

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

htmlcssionic-framework

Answer №1

You can achieve centered alignment for the image by applying the following CSS snippet.

.main-content .centered-image {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

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

The Ionic CLI version 6.x is currently in the process of establishing connectivity with the vue-cli-service, causing a spike in CPU usage up

I recently integrated Ionic 6 into my new Vue 3 project and encountered an issue when running npx ionic serve. The build process and serving of the project work as expected, but it seems to be causing a processor to run at 100%, leading to what looks like ...

vue.jsionic-framework

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

c#.nethtmlinternet-explorercoding-style

Could someone please explain the meaning of that in Bootstrap in a clear and detailed manner?

<div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> I attempted to utilize bootstrap, yet I am struggling to grasp it ...

htmlbootstrap-5

The Angular Material table does not adapt to different screen sizes

I developed an Angular application using Angular Material that features a table with 22 columns. However, when I expand the browser window, some columns are hidden. Additionally, on mobile browsers, not all columns are displayed. I have attempted the follo ...

cssangularangular-material

Tips for positioning divs on top of an image with Twitter Bootstrap

I'm having an issue with displaying an image and dividing it using bootstrap div columns. The problem is that the image is overlapping the divs, making it impossible to click or attach jQuery events to it. Here is the code I am currently using: #view ...

javascriptjqueryhtmlcsstwitter-bootstrap

The search results on my website are completely unaffected by jQuery

One website I have allows me to search within the database, focusing on boats at the moment. I have set up this form: <form method="post" action=""> <input type="text" class="form-control" id="searchField" name="searchField" autocomplete="of ...

phpjqueryhtmlsearch

Unable to click on hyperlink and image not adjusting in size

I am having an issue with the anchor tags inside a div. For some reason, the width and height are set to 0px, and I have tried to adjust them with no success. Each dot in my onepage scroller is meant to navigate to a different page. .dotstyle-scaleup{ f ...

htmlcss

Tips on how to link images in an HTML file when it is being accessed locally on a host server

I am working on creating an HTML file that displays an image. My plan is to package the project into a zip folder and share it with someone who will run it on their local machine. Assuming I have an index.html file that includes an image called infographi ...

html

Is it possible to use Bootstrap's Accordion or Alert styles with HTML elements <details> and <summary>?

For my projects, I typically utilize Bootstrap for styling and usually do not include any Javascript as it is unnecessary. However, I am now working on a project that requires a feature similar to Bootstrap's Accordion, which does require Javascript t ...

htmlcsstwitter-bootstrapbootstrap-5html-tag-details

Attach [!hidden] to a dropdown menu choice using Angular 2

How can I implement a show/hide feature for a select box in Angular 2+? Here's what I have so far: <select> <option disabled selected>Flow progress</option> <option *ngFor='let flow of flows'>{{flow}}< ...

htmlangulartypescriptangular2-forms

The primary HTML file in Angular is unable to access the styles.scss file located in the src/styles directory

Just starting out with Angular. To incorporate the 7-1 scss pattern into my project, I established a styles folder within the src directory named "src/styles", and connected the components to the src/styles/style.scss file successfully. However, I'm ...

htmlangularsassdirectory-structure

python downloading and zipping files dynamically with django

I have a form with checkboxes for "audio" and "video". When a user checks one, a dynamic download is generated for that file type. If both checkboxes are checked, the audio and video files are combined into a zip file for download. I am using StringIO to a ...

pythonhtmldjango

The HTML5 video element is not functioning properly on iOS devices

<video preload="true" controls="true" style="width:100%;" id="video-banner" poster="poster-img.png"> <source src="video.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> I have the following code to displ ...

iosiphonehtmlvideomp4

Every fourth list item, beginning with a designated number

I'm attempting to add a border to specific list items in my HTML. I want the border to start from the 9th child and then continue every 4th child after that. For clarification, I'd like the 9th, 13th, 17th, 21st, 25th... list items to have white ...

csshtml

Incorporating an iframe seamlessly into a div element with scroll functionality

To start off, you can find the code in this JSFiddle link I am attempting to include an iframe as if it were a div. I understand how to do this with a regular iframe, but the one I am using contains a slider, resulting in two vertical scroll bars appearin ...

htmlcssiframe

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF us ...

javascriptcsscanvassvgcanvg

How can you check if a field is blank without allowing any empty spaces to be saved in JavaScript?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <form id="api_crud_form" name="api_crud_form" action="https://www.google.es"> Name: <input type="text" name="name" id=" ...

javascriptphphtml

Using CSS Grid to Create Three Rows of Equal Height

I am facing an issue with my vertical menu that stretches 100% height. The rows inside this menu need to have equal height and be stretched to fit the container. Additionally, I noticed that adding a button seems to drop the container slightly below the pa ...

htmlcsstwitter-bootstrapmenu

Unable to alter the height of the element

I am attempting to resize an element by dragging, similar to this example. I have created a simple directive for this purpose: @Directive({ selector: '[drag-resize]' }) export class DragResizeDirective { private dragging: boolean; const ...

javascriptcssangular

Issue with LAMP Stack: HTML table updates are not syncing correctly with the database

Greetings, I am currently working on an HTML form called Index.html <html> <body> <form action="update.php" method="POST"> Department: <input type="text" name="department"><br><br> Subname: <input type="t ...

phphtmllamp