zoukankan      html  css  js  c++  java
  • 图片水平垂直居中

      1.图片水平居中

       1-1: 使用text-align:center让图片居中

        给img元素的父级元素添加text-align属性

        <div style=" 400px; height: 300px; border:1px solid red; text-align:center">
            <img src="8104044_230939695000_2.jpg" style=" 80%;">
        </div>

       1-2: 使用margin:0 auto使得图片水平居中

         img元素结合display:block;属性

    1 <div style=" 400px; height: 300px; border:1px solid red;">
    2         <img src="8104044_230939695000_2.jpg" style=" 80%; display:block; margin:0 auto;">
    3     </div>

      2. 图片垂直居中

        2-1:使用line-height属性,给父元素添加行高,img结合vertical-align:middle;

    1     <div style=" 400px; height: 300px; border:1px solid red; line-height:300px;">
    2         <img src="8104044_230939695000_2.jpg" style=" 80%; vertical-align: middle; ">
    3     </div>

        2-2:利用table实现垂直居中;结合着vertical-align:middle使用

    1     <div style=" 400px; height: 300px; border:1px solid red; display: table-cell; vertical-align: middle;">
    2         <img  src="8104044_230939695000_2.jpg" style="80%; ">
    3     </div>

        2-3: 利用定位实现图片垂直居中

          结合c3的transform属性的translate

    1     <div style=" 400px; height: 300px; border:1px solid red; position: relative;">
    2         <img  src="8104044_230939695000_2.jpg" style="80%; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);">
    3     </div>

        tip:以上图片只是垂直居中

          2-4.利用flex布局

          css3中的flex布局方式,

      

    1     <div style=" 400px; height: 300px; border:1px solid red; display: flex; align-items: center; justify-content: center;">
    2         <img  src="8104044_230939695000_2.jpg" style="80%;">
    3     </div>

        tip:利用justify-content:center;让子元素水平居中

     

      

        

  • 相关阅读:
    iOS提醒用户进入设置界面进行重新授权通知定位等功能
    JQ获得ul li 值导成字符串
    “真的”
    原来还有插入代码功能 我还挨个缩进呢 好白菜啊
    ffmpeg 批处理
    DW english
    CI 分页“第一页”问题
    Discuz论坛发帖统计
    我的产品被评为一个“玩具”
    根据css文件采集图片
  • 原文地址:https://www.cnblogs.com/browse/p/10159899.html
Copyright © 2011-2022 走看看