div中如何让文本元素、img元素水平居中且垂直居中
一、文本元素在div中的水平居中且垂直居中方法
html代码
<div id="box">
<p>文本元素</p>
</div>
css代码:给文本元素的父级设置——text-align:center; 并设置父级的行高等于父级的高度
#box{
width: 200px;
height: 200px;
background: skyblue;
text-align: center;
line-height: 200px;
}
结果如下:
二、img元素在div中的水平居中且垂直居中方法
方式一:把div设置为弹性盒子,img的margin设置为auto;
html代码:
<div id="box">
<img src="img/1.jpg" alt="" width="150" height="150" />
</div>
css代码:
#box{
width: 200px;
height: 200px;
background: orange;
display: flex;
}
img{
margin: auto;
}
结果如下:
方式二:把div的display设置du成table-cell,text-align为center,垂直居中设置vertical-align为middle。
html代码:
<div id="box">
<img src="img/1.jpg" alt="" width="150" height="150" />
</div>
css代码:
#box{
width: 200px;
height: 200px;
background: aquamarine;
display: table-cell;
text-align: center;
vertical-align: middle;
}
结果如下:
方式三:
①img有固定的宽高,通过定位和设置margin的方法;
html代码:
<div id="box">
<img src="img/1.jpg" alt="" width="150" height="150" />
</div>
css代码:
#box{
width: 200px;
height: 200px;
background: salmon;
position: relative;
}
img{
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -75px;
}
结果如下:
②img没有固定的宽高,通过定位和平移;
html代码:
<div id="box">
<img src="img/1.jpg" alt="" />
</div>
css代码:
#box{
width: 300px;
height: 300px;
background: cornflowerblue;
position: relative;
}
img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
结果如下:
div中如何让文本元素、img元素水平居中且垂直居中的更多相关文章
- 用jQuery向div中添加Html文本内容
前台代码: <link href="http://www.cnblogs.com/Content/themes/base/jquery-ui.css" rel="s ...
- div中嵌套img元素,4px空白
写布局的过程中遇到一个问题,在div中嵌套了img元素,没有指定div的高度,嵌套之后div高度始终比img高4个像素,没有设置内外边距,找不到原因. 除非强制div的高度为img的高度,才能使div ...
- iphone下元素放在了一个position: fixed的div中无法点击
网上的说法是这样的: iphone的浏览器有这么一个bug, 当你使用锚定或滚动页面后, 你会发现某些东西不能点击了! 如果你的这个“东西”放在了一个position: fixed的div中, 那么你 ...
- 一个未知宽高的元素在div中垂直水平居中
<body> <div id="#div1"> <img src="img1.png"></img> </ ...
- 没有高度的div中的子元素高度自动撑开
直接上代码: 很多时候 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
- CSS 中的伪类和伪元素
伪类(Pseudo classes) 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和 class 有些类似, ...
- 在js中怎么样选择互斥的相邻元素
在使用jquery中,我们通常会选择siblings()去选择相邻元素,使用eq()方法去匹配元素,使用index()获取对应元素的索引值,具体jquery代码如下: <style> *{ ...
随机推荐
- Linux 设置简单密码
centos: echo 密码 | passwd --stdin 用户名 ubuntu:(需先设置一个密码) sudo passwd username https://blog.csdn.net/mi ...
- Redis 穿透 & 击穿 & 雪崩
原文:https://www.cnblogs.com/binghe001/p/13661381.html 缓存穿透 如果在请求数据时,在缓存层和数据库层都没有找到符合条件的数据,也就是说,在缓存层和数 ...
- Gitlab 快速部署及日常维护 (一)
一.GitLab简介GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务 二.GitLab系统架构git用户的主目录通常是/home/git(~ ...
- SPOJ REPEATS Repeats (后缀数组 + RMQ:子串的最大循环节)题解
题意: 给定一个串\(s\),\(s\)必有一个最大循环节的连续子串\(ss\),问最大循环次数是多少 思路: 我们可以知道,如果一个长度为\(L\)的子串连续出现了两次及以上,那么必然会存在\(s[ ...
- 攻防世界ctf bug
bug 考查: 逻辑漏洞.文件内容检测绕过 ,文件头是位于文件开头的一段承担一定任务的数据,一般开头标记文件类型,如gif的gif89a,或gif87a, png的x89PNG\x0d\x0a,等等 ...
- webpack4.0源码解析之打包后js文件分析
首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...
- Windows中VS code无法查看C++ STL容器的值 - 解决方法
Windows中VS code debug时无法查看C++ STL容器内容 首先,你很可能用的是x64版本的Windows. 我发现一个有效的解决方法,但在x64版本的Windows上安装MinGW时 ...
- CSS 滚动条宽度 All In One
CSS 滚动条宽度 All In One 滚动条宽度 IE 16px Chrome 12px scrollbar width bug 改变设计稿的宽度,没考虑到 scrollbar width sol ...
- 如何重置电信悦 me 智能网关
如何重置电信悦 me 智能网关 重置电信网关密码 电信悦 me 智能网关密码忘记了怎么办? 首先,得要知道默认终端配置地址和默认终端配置密码. 可以从无线路由器背面标签得知. 如果不知道密码了,可以通 ...
- HTTP in depth
HTTP in depth https://developer.mozilla.org/en-US/docs/Web/HTTP https://developer.mozilla.org/en-US/ ...