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