CSS中图片水平垂直居中方法小结
- 写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法。
一、使用垂直居中和水平居中
<div id="div1">
<img src="img/bg1.png" alt="">
</div>
对应的CSS的样式为:
#div1 {
width: 500px;
height: 200px;
background-color: #0c0c0c;
display: table-cell;
vertical-align: middle;
text-align: center;
}
二、使用相对定位和绝对定位
主要原理是父div相对定位,子div采用绝对定位
<div id="div4">
<img src="img/bg1.png" alt="">
</div>
对应的CSS的样式为
#div4 {
width: 500px;
height: 300px;
position: relative;
background-color: #eee;
}
#div4 img {
position: absolute;
left: 38%;
top: 35%;
}
主要是要注意的问题是要自己定位距离左、上的距离;
三、使用浮动定位
主要原理为设置父divdisplay: flex;
,然后子div自由浮动
<div id="div5">
<img src="img/bg1.png" alt="">
</div>
对应的样式:
#div5 {
width: 400px;
height: 300px;
display: flex;
background-color: #0c0c0c;
}
#div5 img {
width: 116px;
height: 101px;
max-width: 100%;
max-height: 100%;
margin: auto;
}
CSS中图片水平垂直居中方法小结的更多相关文章
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS制作图片水平垂直居中 亲测推荐
空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...
- 关于div中图片水平垂直居中的问题
最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...
- css 使图片水平垂直居中
1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
<div class="demo"><a href="#"><img src="http://nec.netease.c ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
随机推荐
- css的一些复习
css,全称Cascading Style Sheets,层叠样式表. css选择器是从右往左解析的,解析速度会比较快. 选择器 选择器权重 !important 优先级最高 元素属性 优先级高 相同 ...
- hiho第151周 Building in Sandbox floodfill
题意:题目背景是<<我的世界>>,堆方块造房子,堆的规则是:新堆的方块必须和已有方块有重合面,而且不能往封闭空间里堆. 在三维空间中,给定一个堆的序列,判断符不符合规则. 数据 ...
- nginx笔记3-负载均衡算法
1.nginx测试:先从官网下载nginx 官网网址为:http://nginx.org/ 然后找到stable version的版本下载,因为这版本是最稳定的,不要去下载最新,因为不稳定,如下图: ...
- JDBC批量插入优化addbatch
// 获取要设置的Arp基准的List后,插入Arp基准表中 public boolean insertArpStandardList(List<ArpTable> list) { Con ...
- 写出一条Sql语句:取出表Customer中第31到第40记录(SQLServer,以自动增长的Id作为主键,注意:Id可能不是连续的。
select top 10 * from (select ROW_NUMBER() over(order by Id) as rows,* from Customer) as C where C.ro ...
- 3.3.4 PCI设备进行DMA写时发生Cache命中
如果PCI设备访问的地址在某个CPU的Cache行中命中时,可能会出现三种情况. 第一种情况是命中的Cache行其状态为E,即Cache行中的数据与存储器中的数据一致:而第二种情况是命中的Cache行 ...
- R︱Linux+Rstudio Server尝鲜笔记(打造最佳Rstudio体验+报错的解决方案)
Rstudio Server 是Rstudio开发的基于R语言的网页版(只能在Linux),你在手机上都可以运行R,还是挺方便的.就是配置起来有点麻烦. 官方下载链接:https://www ...
- php中静态变量和静态方法。
在php类的内部当使用static进行修饰了类的属性或者方法,则改属性或者方法被成为类的静态属性或者静态访问, 静态属性和非静态属性的区别 php官方的解释 声明类成员或方法为static,就可以不实 ...
- R语言︱数据去重
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:unique对于一个向量管用,对于m ...
- 基于stm32的can总线彻底研究
1.CAN总线的初始化 void can_init(void){ CAN_InitTypeDef CAN_InitStructure; CAN_FilterInitT ...