Today you need to center the text vertically, that is, the line is vertically centered, and multiple lines are vertically centered.
The effect is as follows
Implementation code (colleague provided)
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <style>. Listdiv{Display:Flex;width:300px;Height:60px;padding:10px;background:#ccc;Margin-bottom:10px; }. Listdivleft{Flex:1;Height:60px;Overflow:Hidden; }. Listdivleft span{Display:Table-cell;Height:60px;Line-height:30px;; Vertical-align:Middle;text-decoration:None; }. Listdivright{Padding-left:10px; }. listdivright img{width:60px;Height:60px; } </style></Head><Body> <Divclass= "Listdiv"> <Divclass= "Listdivleft"> <span>I am a very long and long text, do not believe you see, ah yo, or really, can't play.</span> </Div> <Divclass= "Listdivright"> <imgsrc= "Http://images.cnblogs.com/cnblogs_com/lovesong/508505/t_f.jpg"/> </Div> </Div> <Divclass= "Listdiv"> <Divclass= "Listdivleft"> <span>I just have one line, no more.</span> </Div> <Divclass= "Listdivright"> <imgsrc= "Http://images.cnblogs.com/cnblogs_com/lovesong/508505/t_f.jpg"/> </Div> </Div></Body></HTML>
Demo Address
Http://htmlpreview.github.io/?https://github.com/codingforme/code-learn/blob/master/css-demo/multi-row-text-middle.html
CSS multi-line text vertically centered