让一个图片在div中居中（四种方法）

第一种方法：

<div class="title"><div class="flag"></div><div class="content"><img src="img_p1_title.png"></div></div>

.title {width: 100%;font-size: 0;  height: 10%;
}
.title .content img {width: 35%;
}
/*--主要的--*/
.content{display: inline-block;vertical-align: middle;}
.flag{display: inline-block;vertical-align: middle;height: 100%;width: 0;}

第二种方法：

<div class="title"><img src="img_p1_title.png">
</div>

.title {display: flex;justify-content: center;align-items: center;
}
.title img {width: 35%;
}
//该方法有些旧系统不支持

第三种方法：

<div class="title"><span>第三种方法</span>
</div>

.title {height: 15%;font-size: 18px;position: relative;
}
.title span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

第四种方法：

<div class="title"><span>第四种方法</span>
</div>

.title {width: 200px;height: 200px;vertical-align: middle;display: table-cell;text-align: center;
}

***:红色部分就是主要代码

让一个图片在div中居中（四种方法）相关推荐

html中div设置图片居中显示,图片在DIV中居中显示的方法
问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景) 关于该问题的解决方法如下: 方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的 ...
html让整个div居中,分享一个可以让DIV实现居中齐的方法
无意中在网站看到一属性可以让一个DIV实现居中,个人觉得很好,想起以前自己学习CSS时候也曾经接触过实现DIV居中的方法,看过css彻底研究一本书,中讲到用三个DIV的方式,实现代码长,代码不易理解, ...
html5div输入内容,将input框中输入内容显示在相应的div中【三种方法可选】
例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: #div{ width: 175px; height: 100px; margin: 20px 84px; border: ...
python下载图片到文件夹_Python下载图片并保存本地的四种方法
一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url ...
php图片居中在div,css如何实现图片在div中垂直居中
本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种 ...
css文字在div中,[html][css]让文字在div中居中的方法[转]
转至:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm 一.行高(line-height)法如果要垂直居中的只有一行或几个文字, ...
c语言中字符串去掉逗号,JS四种方法去除字符串最后的逗号
window.οnlοad=function() { var obj = {name: "xxx", age: 30, sex: "female"};//定义一 ...
CSS布局：设置图片在DIV中上下左右居中(水平和垂直都居中)
CSS布局实例,这个例子相信很实用,让一个图片在Div容器中上下.左右都居中,也就是水平和垂直都居中,有用吧,平时遇到的机率挺高的,下面结合CSS和HTML来实现这个演示,请参见代码: <sty ...
【CSS】一个div在另外一个div中居中显示（水平居中，竖直居中）
一个div在另外一个div中居中显示(水平居中,竖直居中) 方法1: 通过设置子元素绝对定位和margin:auto .parent {position:relative;width:800px;he ...

让一个图片在div中居中（四种方法）

让一个图片在div中居中（四种方法）相关推荐

最新文章

热门文章