css3 - css- unable to keep the text aligned next to the icon -


enter image description here

i'm making ionic2 app. portion of screen see above 1 of pages display address , mobile number.

i added icon theaddress can see when goes next line, starts left side when i'm expecting text stay this.

(icon) show address, , i'm trying         keep aligned 

can tell me how that? knowledge of css weak.

my code:

  <ion-item-group>     <ion-item>       <ion-icon name="pin"></ion-icon> <span text-wrap>this show address, , i'm trying keep aligned </span></ion-item>     <ion-item>       <ion-icon name="call"></ion-icon> 01162464176</ion-item>   </ion-item-group> 

demo

you can achieve using grid layout. put icon , text in 2 columns inside row , give icon column width auto if icon size changes adjust automatically, don't have hard code width

<ion-row>     <ion-col col-auto>       <ion-icon name="pin"></ion-icon>     </ion-col>     <ion-col>       <span text-wrap>this show address, , i'm trying keep aligned </span>     </ion-col> </ion-row> 

Comments

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

html - How to custom Bootstrap grid height? -

transpose - Maple isnt executing function but prints function term -