Menu
hello I have some pages in an ionic 2 app, that have an inside a .. like this
<ion-content padding>
<p>Some text here....</p>
<p>Some other text here...</p>
<ion-img width="180" height="180" src="assets/images/goal.jpg"></ion-img>
<p>bottom text here...</p>
</ion-content>
I need to see the image centered horizontally.. I have tested some css but without luck.. how can I achieve that?
853
Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.
An <img> element is an inline element (display value of inline-block ). It can be easily centered by adding the text-align: center; CSS property to the parent element that contains it. To center an image using text-align: center; you must place the <img> inside of a block-level element such as a div .
You have to use ion-justify-content-center on a flexbox node. So either you put display: flex on your wrapper div node, or you just use ion-justify-content-center on <ion-row> like so.
To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid . Then set the place-items property to center. P.S.: place-items with a value of center centers anything horizontally and vertically.
You can use ionic CSS utilities to align center by applying the attribute text-center to the parent element of the one you want to center horizontally.
Here is an example:
<ion-content text-center>
<img src="assets/imgs/logo.png" width="128" />
</ion-content>
In your case I would wrap the <img> in a <div> so that it affects only the image and not the <p> elements.
Like this:
<ion-content padding>
<p>Some text here....</p>
<p>Some other text here...</p>
<div text-center>
<ion-img width="180" height="180" src="assets/images/goal.jpg"></ion-img>
</div>
<p>bottom text here...</p>
</ion-content>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
