Mobile app for iphone Android small icon text layout

Scenario Description:

Display some data in the mobile browser, which is preceded by small icons, requiring: small icons and text horizontally aligned.

Problem Analysis:

There are a lot of solutions to the problem of picture-and-text landscape, but it is still the same line of pictures and words on the display.

Implementation scenarios:

Programme one:

The wording is simple, but this compatibility has a lot of problems.

. m-icon{

Display:inline-block;

Vertical-align:middle;

Padding-right:1em;

Height:1em;

Background-image:url (Icon.png);

Background-size:1em;

Background-repeat:no-repeat;

}

. m-icon.star{

BACKGROUND-POSITION:NPX npx;

}

. m-icon.like{

BACKGROUND-POSITION:NPX npx;

}

. m-icon.share{

BACKGROUND-POSITION:NPX npx;

}

. m-text{

Display:inline-block;

Vertical-align:middle;

Font-size:1em;

}

<i class= "M-icon star" ></i><span></span><i class= "M-icon like" ></i><span ></span><i class= "M-icon share" ></i><span></span>

Tip: This is a very simple notation and can be aligned using the Inline-block attribute of the CSS3, but this is a good display on Android, and the iphone has a noticeable problem with misalignment.

Scenario Two:

Mobile app for iphone Android small icon text layout