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 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
随机推荐
- PAT1118. Birds in Forest (并查集)
思路:并查集一套带走. AC代码 #include <stdio.h> #include <string.h> #include <algorithm> using ...
- UVA - 1631 Locker 记忆化搜索
题意:给定两个密码串,每次可以让1~3个相邻的密码向上或者向下滚动,每个密码是 ,问最少需要多少次滚动可以让原串成为目标串? 思路:假设当前要让第i位密码还原,我们可以同时转动,不同的转动方式会影响后 ...
- python如何使用pymysql模块
Python 3.x 操作MySQL的pymysql模块详解 前言pymysql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而M ...
- Docker系统四:Dcoker的镜像管理
1. Dcoker镜像初识 $ docker images -a //查看当前所有镜像 REPOSITORY TAG IMAGE ID CREATED SIZE cptactionhank/atlas ...
- R语言︱XGBoost极端梯度上升以及forecastxgb(预测)+xgboost(回归)双案例解读
XGBoost不仅仅可以用来做分类还可以做时间序列方面的预测,而且已经有人做的很好,可以见最后的案例. 应用一:XGBoost用来做预测 ------------------------------- ...
- RS232 3线制与7线制的区别
当通信距离较近时,可不需要Modem,通信双方可以直接连接,这种情况下,只需使用少数几根信号线.最简单的情况,在通信中根本不需要RS-232C的控制联络信号,只需三根线(发送线.接收线.信号地线)便可 ...
- linux驱动---用I/O命令访问PCI总线设备配置空间
PCI总线推出以来,以其独有的特性受到众多厂商的青睐,已经成为计算机扩展总线的主流.目前,国内的许多技术人员已经具备开发PCI总线接口设备的能 力.但是PCI总线的编程技术,也就是对PCI总线设备的操 ...
- MongoDB集群之分片
原文:点击打开链接 MongoDB分片 分片(sharding)是将数据拆分,将其分散在不同的机器上的过程.MongoDB支持自动分片 片键(shard key)设置分片时,需要从集合里面选一个键,用 ...
- AM3358--Uboot支持LCD输出1024*768
1. uboot/include/lcd/tq3358_fb.h #define TFT240320 1 #define TFT320240 2 #define TFT480272 3//T43(天嵌 ...
- AM335x(TQ335x)学习笔记——USB驱动移植
对于AM335x来讲,TI维护的USB驱动已经非常完善了,本文称之为移植,实际上仅仅是配置内核选项使能USB HOST/OTG功能.废话少说,直接动手开启AM335x的USB驱动配置项. Step1. ...