css设置文字上下居中，一行文字居中，两行或多行文字同样居中。【团购活动】

 

 

 

html:

 <div class="book-detail-store-item align-center-vertical">居中文字</div>

css:

.book-detail-store-item { width: 50px； height：50px； line-height: 25px; font-size: 12px; } /*flex垂直居中对齐*/ 
.align-center-vertical{ display: flex; align-items: center; justify-content: space-around; flex-direction: column; }

 

 

---

 

 

 

 html:

 

 <div class="list">
             <ul>
                                    <li>
                                        <div class="useface" style="background:#cccccc  url('images/img-1.jpg') center no-repeat; background-size: cover;"></div>
                                        <div class="nickname">
                                            <span>啦****啦</span>
                                        </div>
                                        <div class="center">
                                            <span>还差1人</span>
                                            <span class="lastTime">剩余 20:21:10</span>
                                        </div>
                                        <div class="go-tuan">
                                            <span>去参团</span>
                                        </div>
                                    </li>
              </ul>
     </div>

css:

.list{
          ul{
            li{ display: flex; padding: px2rem(20) 0; border: red 1px solid;
              .useface{width: px2rem(100); height: px2rem(100); border-radius: px2rem(50); margin: 0 px2rem(20) 0 0;}
              /*.nickname{flex: 2;  display: flex; align-items: center; }*/
              .nickname{flex: 2;  text-align: left; display: flex; justify-content: space-around; flex-direction: column;
                span{ line-height: px2rem(20); float: left;}
              }

              .center{flex: 2; text-align: right; display: flex;justify-content:center; flex-direction: column;
                span{ line-height: px2rem(20);}
                span.lastTime{ font-size: px2rem(16); color: #3e3e3e; line-height: px2rem(20);}
              }

              .go-tuan{flex: 1; display: flex; align-items: center; margin-left: px2rem(20);
                span{display: block; width: px2rem(100); line-height: px2rem(40); color: #fff; text-align: center; background: #ef9279; margin: 0 auto; border-radius: px2rem(40);}
              }
            }
          }
        }

 

给心灵一个纯净空间，让思想，情感，飞扬！