图片水平垂直居中的几种方法总结
1、固定图片大小水平垂直居中,图片300*200 如下:
html代码
<div class="con"><img src="data:images/fengche.png" alt=""></div>
css代码
.con{width: 40%;height: 300px;margin:50px auto;border: 1px solid red;/*子元素是行内块时候 可以通过text-align center 设置水平居中*/text-align: center;}img{width: 200px;height: 200px;/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*/line-height: 300px;/*margin:100px auto;*/}
效果如下
发现水平方向可以通过text-align center 设置水平居中,但是垂直方法无法居中,怎么办呢。img 属于行内块元素,支持所有元素,利用margin-top让它垂直居中。
.con{width: 40%;height: 300px;margin:50px auto;border: 1px solid red;/*子元素是行内块时候 可以通过text-align center 设置水平居中*/text-align: center;}img{width: 200px;height: 200px;/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*/line-height: 400px;/*margin:100px auto;*/margin-top: 50px;}
水平方向能不能也靠margin auto实现呢?
.con{width: 40%;height: 300px;margin:50px auto;border: 1px solid red;/*子元素是行内块时候 可以通过text-align center 设置水平居中*//*text-align: center;*/}img{width: 200px;height: 200px;/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*//*line-height: 300px;*/margin:50px auto;/*margin-top: 50px;*/}
这个时候发现垂直居中了 但是水平没有居中。。。原因暂时想不出来。。。
总结:这种方法比较初级,前提是图片固定大小,根据盒子大小和图片大小计算出margin-top,从而让图片垂直居中。如果不需要水平居中则去掉外部盒子的 text-align: center;
2、利用display:table-cell
html代码同上
css代码
.con{width: 40%;height: 300px;/*margin不生效*/margin:50px auto;border: 1px solid #ddd;/*转换表格属性*/display: table-cell;/*垂直方向居中*/vertical-align: middle;/*水平方向居中*/text-align: center;}img{width: 200px;height: 200px;}}
效果如下:
总结:这个方法主要是利用了表格属性,用table-cell
搭配vertical-align
可以十分简单地完成元素垂直居中。但是margin不生效了。。。
3、利用背景实现居中
html代码
<div class="con"></div>
css
.con{width: 400px;height: 300px;border: 1px solid #ddd;background:url(images/dog.jpg) center center no-repeat;}
效果一样
总结:图片固定不变的地方可以使用。
4、利用定位
<div class="con"><img src="data:images/dog.jpg">
</div>
css
.con{width: 40%;height: 300px;/*margin不生效*/margin:50px auto;border: 1px solid #ddd;position: relative;}img{position: absolute;width: 200px;height: 200px;left: 0;right: 0;top: 0;bottom: 0;margin:auto;//很关键}
其他的方法还有很多,关键是找到适合的方法。
图片水平垂直居中的几种方法总结相关推荐
- CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
- html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法
1.text-align:center实现图片水平居中 text-align一般用于文本的水平居中,也可以用于图片,代码如下: CSS部分: div{ text-align:center; width ...
- php垂直居中代码_图文详解图片水平垂直居中的五种方法(附代码)
在页面布局时经常需要对图片的位置进行处理,这篇文章围绕图片居中展开,主要讲了如何用CSS实现图片的水平居中,图片垂直居中,还有图片的水平垂直居中,课程比较实用,感兴趣的小伙伴,可以参考一下,希望对你有 ...
- CSS实现水平垂直居中的五种方法
前言 今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...
- 前端:水平垂直居中的10种方法
第一种: 通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的 ...
- CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...
- 让一个 div 水平垂直居中的几种方法
水平垂直居中有好多种实现方式,主要就分为两类:不定宽高和定宽高,以在body下插入一个div为例: 定宽高 使用定位+margin element.style {position: absolute; ...
最新文章
- 在request.GET中捕获url参数
- 家庭安全摄像头:应选择本地还是云端存储?
- 去掉 java BigDecimal 类对象后面没用的零
- Zip4j开源jar包的简单使用
- Android之怎么隐藏EditText光标和自动显示键盘
- corel产品注册样机安装代码_为你的产品创建一个高逼格的宣传片
- HTTP、HTTPS、SPDY、HTTP2.0、HTTP3.0 —— 通信协议学习笔记(二)
- 卜若的代码笔记-机器学习基础-UCI数据库简介与Iris数据集分析
- 用混淆矩阵计算kappa系数
- U盘启动盘制作工具哪个好用_U盘PE系统哪个纯净干净无捆绑?
- RHCE考试分开三个阶段
- 咱们也真够疯狂的。。
- java图片加文字水印_JAVA实现图片的修改,添加文字水印效果
- 关于SuperSlide插件的使用
- 如何修复Word文档XML提示
- 原油价格接近七年高位-对冲基金预测2022年原油价格突破105美元
- 华为发布MetaAAU,能耗降低30%,性能节能双提升
- 讲中国故事的博主正在变多,李子柒为什么不可复制?
- php凑整10算法,加减凑整法教案
- GPS从入门到放弃(十一)、差分GPS