Horizontal text Center (mobile) and text Center

Horizontal text Center (mobile) and text Center

In this case, the overall picture and nickname of the third-party joint login are centered,

For such a requirement, you cannot simply use margin: 0 auto for the div containing the Avatar and nickname, because the length of the nickname is unknown.

Solution 1: Use the padding-left attribute of the row element. Place the image in the padding-left area, set the text center for the div element on the external layer, and set line-height for the span element to center the text vertically.

<div class="container">    <span class="wrap">            Username    </span></div>.container {    height: 10rem;    text-align: center;    background: #819121;}.wrap {    display: inline-block;    position: relative;    margin-top: 3rem;    padding-left: 3rem;    line-height: 2rem;    background: #BB9391;}.icon {    position: absolute;    left: 0;    top: 0;    height: 2rem;}

 

:

 

Solution 2: center box layout, box-pack for div elements, and display: block for span elements. To be lazy, the compatible mode is omitted.

 

<div class="container">        <span class="username">Username</span></div>.container {    display: -webkit-box;    -webkit-box-pack: center;    height: 10rem;    background: #B2B2CD;}.icon {    margin-top: 2rem;    height: 2rem;}.username {    display: block;    margin-top: 2rem;    padding-left: 1rem;    line-height: 2rem;}

 

:

 

Comments: solution 1 will be relatively stable, while solution 2 is easy to maintain.