首页 > web前端 > css教程 > 正文

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

小云云
发布: 2017-12-22 15:28:08
原创
2054 人浏览过

CSS是前端开发必不可少的一门语言,本文主要介绍了CSS居中实例之大小不固定的图片居中方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

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


<p class="box1">
    [站外图片上传中……(5)]
</p>
登录后复制


p{
  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.多行文本的垂直居中方法

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


<p class="box3">
    <span>你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据</span>
</p>
登录后复制


p{
  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实现图片居中的三种方式

HTML代码怎么实现文字和图片居中?

怎样让css图片居中显示

以上是CSS图片大小不固定的居中方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板