常用布局：实现图片和多行文字在一行显示，图片垂直居中显示。。。。。。

 

 

 

<!DOCTYPE html>
<html>
<head>    
    <link rel="stylesheet" type="text/css" href="task001.css">
    <meta charset="utf-8">
    <title>如何实现图片和两行文字在一行显示</title>
    <style type="text/css">
    *{margin: 0; padding: 0;}
    .clearfix:after {
          clear: both;
          content: ".";
          display: block;
          height: 0;
          visibility: hidden;
        }
      .wrap {
        /* 可无需设置高度，靠图片高度 或者 文字的上下padding撑开高度 */
            border: 1px solid;
            width: 600px;
            text-align: center; margin: 0 auto;
        }
        .wrap span{
            display: inline-block;
            vertical-align: middle;
            padding: 20px 0; /* 撑开高度 */
        }
        .wrap img{
            width: 100px;
            height: auto;
            vertical-align: middle;
        }
    </style>
</head>
<body>    
    <div class="wrap">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=339923587,1372454019&fm=26&gp=0.jpg" alt="">
        <span>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.</span>
    </div>
</body>
</html>

 

posted @ 2020-01-16 17:23  Shimily  阅读(991)  评论(0)    收藏  举报