css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结:
html结构:
<div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">
<img src="default.jpg" width="" height=""/>
</div>
办公资源网址导航 https://www.wode007.com
实现img位于外层div的居中显示,网上有很多在img外层嵌各式各样的span、div、li等等,以便于使用 text-align来进行居中,当然我们不推荐嵌套多层。
方法一:
.demo img{
display: block;
margin:150px auto;
}
思路:<img>标签是属于内联元素,内联元素是不支持 Margin 属性,通过 Display 属性将img强制为块元素的方式显示,便可在图文混排中使得图片可以居中。
方法二:
.demo{
text-align: center;
}
.demo img{
margin-top:150px;
}
思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。
方法三:
.demo img{
padding:150px 200px;
}
思路: 只用padding属性,通过计算求得居中
方式四:
.demo{
display:table-cell; text-align:center; vertical-align:middle;
}
.demo img{
vertical-align: middle;
}
思路:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签,使用它可以让大小不固定元素垂直居中。只是它比上面方法优势。
方法五:
.demo{
position: relative;
}
.demo img{
position: absolute;top:150px;left:200px;
}
思路:通过相对,绝对定义,计算偏移量实现居中
方法六:
.demo{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
思路:实现css6的flex属性,很简单的实现了居中显示,但是推荐使用于web App,低版本浏览器存在一定兼容问题,好处和方法五一样。
css图片居中,通过纯css实现图片居中的多种实现方法的更多相关文章
- CSS 魔法系列:纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS图形基础:纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- 纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
- 纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...
随机推荐
- Java实现约瑟夫环问题
约瑟夫环问题起源于一个犹太故事.约瑟夫环问题的大意如下: 罗马人攻占了桥塔帕特,41个人藏在一个山洞中躲过了这场浩劫.这41个人中,包括历史学家Josephus(约瑟夫)和他的一个朋友.剩余的39个人 ...
- java实现第五届蓝桥杯供水设施
供水设施 X星球的居民点很多.Pear决定修建一个浩大的水利工程,以解决他管辖的N个居民点的供水问题.现在一共有N个水塔,同时也有N个居民点,居民点在北侧从1号到N号自西向东排成一排:水塔在南侧也从1 ...
- 手把手带你入门numpy,从此数据处理不再慌【四】
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是numpy专题的第四篇文章,numpy中的数组重塑与三元表达式. 首先我们来看数组重塑,所谓的重塑本质上就是改变数组的shape.在保 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
- Thread和Runnable
继承Thread类不能实现资源共享.(程序启动了三个线程,但是3个线程却分别卖了各自的5张票,并没有达到资源共享的目的) 实现Runnable接口可以资源共享.(程序启动了三个线程,但是3个线程一共才 ...
- 纯CSS如何实现状态圆点
.circle { display: inline-block; width: 12px; height: 12px; } .circle:after { content: ''; margin: 3 ...
- [Linux之旅一] .NET Core 2.2部署到Docker中
第一步,使用VS2017或者VS2019创建.NET Core 2.2或3.1的项目,如下图: 在创建项目的时候记得勾选Docker支持,这样会自动创建Dockerfile文件,这个文件用于构建Doc ...
- 别再写一摞if-else了!再写开除!两种设计模式带你消灭它!
代码洁癖狂们!看到一个类中有几十个if-else是不是很抓狂? 设计模式学了用不上吗?面试的时候问你,你只能回答最简单的单例模式,问你有没有用过反射之类的高级特性,回答也是否吗? 这次就让设计模式(模 ...
- [转] CISC与RISC
点击阅读原文 这里就不去管细节,简单来谈一下,ARM和X86之间为什么不太具有可比性的问题.要搞清楚这个问题首先要明白什么是架构,之前也有很多人提到了架构不同,但架构是什么意思?它是一个比较 ...
- 【Azure SQL】数据库性能分析
前置条件 用户有查询数据统计权限 GRANT VIEW DATABASE STATE TO database_user; CPU性能问题 正在发生 查看前X个CPU消耗查询 (汇总) SELECT T ...