div里面图片垂直居中的几个例子

最新推荐文章于 2024-03-31 19:00:40 发布
最新推荐文章于 2024-03-31 19:00:40 发布
阅读量584 收藏 1
点赞数
文章标签： div xhtml border html url

在div-css布局运用中，如何让图片在容器里垂直居中是很多人询问的问题，这里收集了几个例子WWYTechFeel

第一个例子

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">WWYTechFeel
<html xmlns="http://www.w3.org/1999/xhtml">WWYTechFeel
<head>WWYTechFeel
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />WWYTechFeel
<title>div里面图片垂直居中的几个例子</title>WWYTechFeel
<style type="text/css">WWYTechFeel
<!-- WWYTechFeel
* {margin:0;padding:0}WWYTechFeel
div {WWYTechFeel
  width:500px;WWYTechFeel
  height:500px;WWYTechFeel
  border:1px solid #666;WWYTechFeel
  overflow:hidden;WWYTechFeel
  position:relative;WWYTechFeel
  display:table-cell;WWYTechFeel
  text-align:center;WWYTechFeel
  vertical-align:middleWWYTechFeel
}WWYTechFeel
div p {WWYTechFeel
  position:static;WWYTechFeel
  +position:absolute;WWYTechFeel
  top:50%WWYTechFeel
  }WWYTechFeel
img {WWYTechFeel
  position:static;WWYTechFeel
  +position:relative;WWYTechFeel
  top:-50%;left:-50%;WWYTechFeel
  }WWYTechFeel
-->WWYTechFeel
</style>WWYTechFeel
</head>WWYTechFeel
<body>WWYTechFeel
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>WWYTechFeel
</body>WWYTechFeel
</html>

第二个例子

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">WWYTechFeel
<html xmlns="http://www.w3.org/1999/xhtml">WWYTechFeel
<head>WWYTechFeel
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />WWYTechFeel
<title>div里面图片垂直居中的几个例子</title>WWYTechFeel
<style type="text/css">WWYTechFeel
<!-- WWYTechFeel
body {WWYTechFeel
  margin:0;padding:0WWYTechFeel
}WWYTechFeel
div {WWYTechFeel
  width:500px;WWYTechFeel
  height:500px;WWYTechFeel
  line-height:500px;WWYTechFeel
  border:1px solid #666;WWYTechFeel
  overflow:hidden;WWYTechFeel
  position:relative;WWYTechFeel
  text-align:center;WWYTechFeel
}WWYTechFeel
div p {WWYTechFeel
  position:static;WWYTechFeel
  +position:absolute;WWYTechFeel
  top:50%WWYTechFeel
}WWYTechFeel
img {WWYTechFeel
  position:static;WWYTechFeel
  +position:relative;WWYTechFeel
  top:-50%;left:-50%;WWYTechFeel
  vertical-align:middleWWYTechFeel
}WWYTechFeel
p:after {WWYTechFeel
  content:".";font-size:1px;WWYTechFeel
  visibility:hiddenWWYTechFeel
}WWYTechFeel
-->WWYTechFeel
</style>WWYTechFeel
</head>WWYTechFeel
<body>WWYTechFeel
<div><p><img src="http://www.techfeel.com/main/img/logo.gif" /></p></div>WWYTechFeel
</body>WWYTechFeel
</html>
 

第三个例子

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">WWYTechFeel
<html xmlns="http://www.w3.org/1999/xhtml">WWYTechFeel
<head>WWYTechFeel
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />WWYTechFeel
<title>div里面图片垂直居中的几个例子</title>WWYTechFeel
<style type="text/css">WWYTechFeel
<!-- WWYTechFeel
* {margin:0;padding:0}WWYTechFeel
div {WWYTechFeel
  width:500px;WWYTechFeel
  height:500px;WWYTechFeel
  line-height:500px;WWYTechFeel
  border:1px solid #666;WWYTechFeel
  overflow:hidden;WWYTechFeel
  position:relative;WWYTechFeel
  text-align:center;WWYTechFeel
}WWYTechFeel
div p {WWYTechFeel
  position:static;WWYTechFeel
  +position:absolute;WWYTechFeel
  top:50%;WWYTechFeel
  vertical-align:middleWWYTechFeel
}WWYTechFeel
img {WWYTechFeel
  position:static;WWYTechFeel
  +position:relative;WWYTechFeel
  top:-50%;left:-50%;WWYTechFeel
  vertical-align:middleWWYTechFeel
}WWYTechFeel
-->WWYTechFeel
</style>WWYTechFeel
</head>WWYTechFeel
<body>WWYTechFeel
<div><p><img src="http://www.techfeel.com/main/img/logo.gif" /></p></div>WWYTechFeel
</body>WWYTechFeel
</html>

背景图片的方法

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">WWYTechFeel
<html xmlns="http://www.w3.org/1999/xhtml">WWYTechFeel
<head>WWYTechFeel
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />WWYTechFeel
<title>div里面图片垂直居中的几个例子</title>WWYTechFeel
<style type="text/css">WWYTechFeel
<!-- WWYTechFeel
* {margin:0;padding:0;}WWYTechFeel
div {WWYTechFeel
  width:500px;border:1px solid #666;WWYTechFeel
  height:500px;WWYTechFeel
  background:url("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">WWYTechFeel
<html xmlns="http://www.w3.org/1999/xhtml">WWYTechFeel
<head>WWYTechFeel
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />WWYTechFeel
<title>div里面图片垂直居中的几个例子</title>WWYTechFeel
<style type="text/css">WWYTechFeel
<!-- WWYTechFeel
* {margin:0;padding:0;}WWYTechFeel
div {WWYTechFeel
  width:500px;border:1px solid #666;WWYTechFeel
  height:500px;WWYTechFeel
  background:url("http://www.techfeel.com/main/img/logo.gif") center no-repeatWWYTechFeel
}WWYTechFeel
-->WWYTechFeel
</style>WWYTechFeel
</head>WWYTechFeel
<body>WWYTechFeel
<div></div>WWYTechFeel
</body>WWYTechFeel
</html>") center no-repeatWWYTechFeel
}WWYTechFeel
-->WWYTechFeel
</style>WWYTechFeel
</head>WWYTechFeel
<body>WWYTechFeel
<div></div>WWYTechFeel
</body>WWYTechFeel
</html>

 
田猿笔记
关注
div文字垂直居中的方法有哪些？
qq_27009517的博客
05-14 1万+
首先我们应该知道文字的水平居中比较简单，行级元素设置其父元素的text-aligncenter，块级元素设置其本身的left和rightmargins为auto即可。但是div文字的垂直居中就不是那么简单了，所以我们就来具体看看div文字垂直居中的几种实现方法。 1、vertical-align属性让文字居中 vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个...
html中div使用CSS实现水平/垂直居中的多种方式
lin123_00的博客
06-22 309
CSS中的居中，在工作中，会经常遇到。它可以分为水平居中和垂直居中，以下是几种实现居中的方式。 以下例子中，涉及到的CSS属性值。 .parent-frame { width: 200px; height: 200px; border: 1px solid red; } .child-frame { width: 100px; height: 100px; border: 1px dotted blue; } 1: text-align:c...
div 内 图片 垂直居中
weixin_34342905的博客
11-23 245
vertical-align属性适用于 line-block； <div class="title"> <img src="img_p1_title.png"> </div> div 内 图片后的文字相对图片垂直居中的话 我们可以对img设定vertical-align:middle； 在div中图片实现自动垂直居中 ...
如何使div中图片垂直居中
勿忘初心的博客
10-17 594
关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧，烦人的是没有具体或者相当详细的解决方法，希望本文所整理的知识点可以帮助到你 div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在50
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
最新发布
m0_61330806的博客
03-31 1743
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。已知box的高度和图片的高度。
html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法
weixin_31766871的博客
05-31 1万+
1、text-align:center实现图片水平居中text-align一般用于文本的水平居中，也可以用于图片，代码如下：CSS部分：div{text-align:center;width:500px;border:greensolid1px;}HTML部分：效果图：图片垂直居中1.jpg2、line-height和text-align:center实现图片的水平垂直居中设置line-heigh...
如何让图片相对于上层DIV始终保持水平、垂直都居中
09-25
在网页设计中，将图片相对于上层的Div元素实现水平和垂直居中是一项常见的需求。这个问题可以通过CSS样式来解决，尤其是利用CSS布局技巧。本文将详细介绍如何实现这个效果。 首先，我们来看给定的HTML代码片段： `...
让Div实现水平或垂直居中的相关方法
09-24
以下CSS代码可以将Div垂直居中： ```css .className { width: 270px; height: 150px; position: absolute; left: 50%; top: 50%; margin-top: -75px; margin-left: -135px; } ``` 这里设置了Div的`position...
CSS line-height行高上下居中垂直居中样式属性
12-08
在这个例子中，`.jb511`设置了行高20px，使得多行文本有合适的行间距；而`.jb512`设置了行高和高度均为30px，使得单行文本在30px高的容器内垂直居中。 ### 四、特殊情况 在处理中文或中英文混合文本，以及在不同的...
div里面的图片垂直居中的方法
qq_26522773的博客
03-05 3871
body结构 &lt;body&gt; &lt;div&gt; &lt;img src="1.jpg" alt="haha"&gt; &lt;/div&gt; &lt;/body&gt; 现在主流是移动端，那方法五最常用，因此我将它前置 方法：弹性布局flex &lt;style type="text/css"&gt; *{m
div里的img图片水平垂直居中（解决）
热门推荐
孟林洁的博客
07-20 3万+
转记！ 实现div里的img图片水平垂直居中
如何实现 img 图片在div里的垂直居中
qikule的博客
10-16 5016
行内元素在父级元素中，垂直居中的实现方法： &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; .logo{position:relative;height: 80px;width:200px;background
实现div里的img图片水平垂直居中
极客神殿
07-03 2144
body结构 <body> <div> [外链图片转存失败(img-XveH5Msl-1562164037436)(https://mp.csdn.net/mdeditor/1.jpg)] </div> </body> 方法一： 将display设置成table-cell，然后水平居中设置text-align为cen...
简单方便实现img在div内垂直居中
6块腹肌的博客
02-19 8966
想要将img在div内实现垂直居中的话可以使用display：table-cell；+  vertical-align：middle；就可以了。如果使用父元素行高的话，实现的垂直居中会导致img的底部在容器的中线上而已，如下： 正确的做法如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;img垂直居中&lt...
python 调百度地图接口，实现地区检索
mh_sun
05-05 608
示例代码 <div class="img_wrap" > <img src="@/assets/none_data.png" alt="" style="width:149px;height:98px;"> </div> .img_wrap{ // width: 100%; min-height: 300px; display...
实现DIV内img图片水平垂直居中的方法
CX的博客
06-02 5530
如何实现DIV内的img图片水平垂直居中的方法？ 方法一：运用flex 对父元素<div class="main">进行css样式设置： { display:flex; justify-content: center; align-items: center; } 方法二：vertical-align <img>是行内元素，line-height设置的是块级元素...
让行内元素（如图片）在div中水平垂直居中 （干货）
YUSIR 完美CODING世界
07-18 5330
（1）第一种：用vertical-align &lt;div class="method1"&gt; &lt;span class="tiptop"&gt;&lt;/span&gt; &lt;img class="test" src="img/Dota2.jpg" alt="dota2"&gt; &lt;/div&gt
html文字垂直居中显示
08-03
在这个例子中，将行高设置为和容器高度相等，并将文本居中对齐，就可以实现文字的垂直居中显示。 方法二：使用flex布局 使用flex布局也可以实现文字的垂直居中显示。例如，可以使用以下的CSS样式来实现： ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值