您的位置:首页 > Web前端 > > 正文

css图片设置垂直居中(CSS居中实例之大小不固定的图片居中方法)

更多 时间:2022-03-28 22:21:33 类别:Web前端 浏览量:1941

css图片设置垂直居中

CSS居中实例之大小不固定的图片居中方法

本文介绍了CSS居中实例之大小不固定的图片居中方法,分享给大家,具体如下:

1.利用table-cell实现垂直居中

css图片设置垂直居中(CSS居中实例之大小不固定的图片居中方法)

  • <li class="box1">
        [站外图片上传中……(5)]
    </li>
    
  • li{
      width: 500px;
      height: 500px;
      background: #ccc;
    }
    .box1{
      text-align:center;
      display: table-cell;
      vertical-align: middle;
      /* font-size: 118px; */
    }
    img{
      vertical-align: middle;
    }
    
    
    
  • 利用父元素为display:table-cell类型实现垂直居中,table在ie8+的浏览器中自带的垂直居中的属性。  

    注意:img{vertical-align: middle;}只是为了消除display:inline-block类型的基线对齐问题。

    2.多行文本的垂直居中方法

     有时可能我们会遇到需要多行文本垂直居中的一些情况,但是做起来有时有些麻烦,需要我们换个思路去实现。

  • <li class="box3">
        <span>你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据</span>
    </li>
    
  • li{
      width: 500px;
      height: 500px;
      background: #ccc;
    }
    .box3{
      display: table-cell;
      vertical-align: middle;
    }
    span{
      display: inline-block;
      vertical-align: middle;
    }
    
  • 将内部的文本用span标签(其他标签也可以)包裹起来,把span标签设为inline-block,然后当图片的垂直居中处理(ie8+)。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:居中 图片 css
    您可能感兴趣