图片自适应父元素大小,并左右上下居中的css方法
来源:互联网 发布:c 语言入门级书籍 编辑:程序博客网 时间:2024/05/21 19:36
效果图:
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div class="pic"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58" alt=""></div> <div class="pic"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2201558756,12364836&fm=111&gp=0.jpg" alt=""></div></body></html><style>.pic { width: 120px;height: 120px;margin: 40px auto;border: 1px solid #ccc;text-align: center;padding: 5px;}.pic:before { content: "";display: inline-block;height: 100%;vertical-align: middle;width: 0;}.pic img { max-width: 120px; max-height: 120px;vertical-align: middle;}</style>
核心思想 就是给父元素添加一个固定100%高度的伪元素撑开,并使用vertical-align: middle;使得内容垂直居中为中间,这样,图片就会垂直居中了。当然,图片也需要加上vertical-align: middle;
阅读全文
0 0
- 图片自适应父元素大小,并左右上下居中的css方法
- 图片自适应父元素大小,并左右上下居中的css方法
- 图片自适应父元素的大小,并左右上下居中
- css图片左右上下居中
- CSS 图片设置左右上下居中方式
- css左右上下居中的几种
- css图片在div内上下居中的方法
- 图片水平、垂直居中与父元素的css方法
- div的上下居中,左右居中,左右上下都居中
- 图片居中,自适应大小
- JQuery实现子元素在父元素居中(左右、上下均居中)
- 用CSS控制图片自适应大小的方法
- 如何用CSS控制图片自适应大小的方法
- CSS图片自适应大小
- css---flex布局中,如何响应式 得水平垂直居中?flex子元素左右 上下居中
- Div 与 CSS 如何实现上下居中 左右居中
- CSS文字图片div元素居中方法之水平居中
- css图片居中的方法
- 十项技能帮助web设计师领先时代潮流
- 【PHP】mysql_close有多重要?与Resource Limit Is Reached解决办法
- 接口结果的封装
- Android图表库MPAndroidChart(三)条行图
- 解决“运行arm-linux-gcc命令,提示No such file or directory”的问题
- 图片自适应父元素大小,并左右上下居中的css方法
- HDU 1228 A + B(map的简单使用)
- 监控平台
- Oracle表空间-本地管理新建
- UIAlertController显示内容左对齐
- of_alias_get_id 函数与设备树中aliases节点的关系
- svn的常用命令
- 【python学习笔记】Python中排序sorted()和list.sort()
- CPU高速缓存行