zoukankan      html  css  js  c++  java
  • flex中的图片垂直居中

    这次的需求是图文左右排列,左边是图片,固定宽高,右边是文字,不确定文字的多少

    效果如下;

    这是文字超多的时候图片垂直居中,

    这是文字比较少的时候,文字垂直居中显示。

    实现方法如下:

    html

    <div class="wrapper">
        <img class="img" src="https://literature.baooo.cn/images_literature/product-class@2.jpg">
        <div class="text">第一,致力于推进经济务实合作。我们应该在贸易投资、货币金融、互联互通、可持续发展、创新和产业</div>
    </div>

    css

        <style type="text/css">
            .wrapper{
                width: 500px;
                border:solid 2px #ccc;
                display: flex;
                flex-direction: row;
                align-items: center; /*垂直居中*/
                justify-content: center; /*水平居中*/
            }
            .img{
                width: 200px;
                height: 200px;
                vertical-align: middle;
                align-items: center;
            }
            .text{
                flex: 1;
                padding-left: 50px;
            }
        </style>    

    over~

  • 相关阅读:
    ==和===
    Println、Printf、Sprintf区别
    BurpSuite代理https
    scp
    Tomcat Ajp(CVE-2020-1938)
    Chrome-HackBar破解
    crontab
    Sql注入之postgresql
    Sql注入之oracle
    LeetCode简单题(一)
  • 原文地址:https://www.cnblogs.com/abuc/p/7474690.html
Copyright © 2011-2022 走看看