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

      在开发中,有时候经常会碰到图片水平居中或垂直居中或者水平、垂直都居中的情况,虽然知道怎么用,但是也只是局限于某一种,有时候也需要调试好一会儿才能解决,因此看了一下关于这方面的知识点,来总结一下。以代码来说事儿。

      html主要代码:

    <div class="container">
        <img src="http://placeholder.qiniudn.com/190x284" alt="">
    </div>
    

      css代码:

    <style>
        .container{
          500px;
          height:400px;
          border:1px solid #eee;
        }
        img{
          200px;
        }
    </style>

      1、图片水平居中。

      这里有一下几种方法可以实现。

      (1)、将img标签变成块元素,然后使用margin:0 auto;即可实现。其他不变,那么此时img的样式为:

    img{
       display:block;
       200px;
       margin:0 auto;
    }
    

      

      (2)、其实跟第一种差不多,就是将img标签一个相对定位(relative)或者绝对定位(absolute),然后left值为50%,然后使用margin-left值为负的图片的宽度的一半就行,代码为

    img{
        200px;
        position: absolute;
        left:50%;
        margin-left:-100px;  // 该值为图片宽度的一半
    }
    

      

      (3)、使用相对定位(relative)或者绝对定位(absolute),然后left值为50%,然后使用css3transform里的translate来实现(虽然在兼容性方面有些小问题)。

    img{
        200px;
        position: relative;
        left:50%;
        transform:translateX(-50%);
    }
    

      

      2、图片垂直居中

      (1)、这里其实上面实现图片水平居中的第三种方法是一样的,只不过是将left换为了top,水平方向移动换成了垂直方向移动而已。

    img{
        200px;
        position: relative;
        top:50%;
        transform:translateY(-50%);
    }
    

      (2)、使用css伪类选择器 :before与vertical-align 来实现,代码为:

    .container:before{
        content:'';
        display: inline-block;
        height:400px;  // 高度值与包含图片的容器的高度一致
        vertical-align: middle;
    }
    img{
        200px;
        vertical-align: middle;
    }
    

      (3)、第三种方法就是已知图片的高度,然后使用top:50%和设置margin-top值为负的图片高度的一半。

      3、至于水平垂直都居中那就好说了,将上面垂直、水平居中的方法结合一下就行了。

      

  • 相关阅读:
    【Appium】appium踩坑记录:解决每次安装appium setting和Unlock
    Pycharm from XXX import XXX 引入本地文件标红报错(source_path&Python package)
    🍖02 不同平台更换pip源
    🍖pycharm 更换 pip 下载源
    🍖01 路飞学城项目分析
    🍖Vue-cli 创建项目
    🍖Vue 与后端交互
    🍖Vue 计算属性
    🍖Vue 虚拟DOM与Diff算法简介
    🍖Vue 生命期钩子
  • 原文地址:https://www.cnblogs.com/jf-67/p/8037529.html
Copyright © 2011-2022 走看看