div的内容图片垂直居中代码

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量591 收藏
点赞数
分类专栏： 平面设计 文章标签： div class xhtml html border float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jojo28/article/details/5266298
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>无标题文档</title>
<style type="text/css">
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
.psdthumb li {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; }
.psdthumb .qq { *position:absolute; top:50%; }
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; }
</style>
</head>

<body>
<div class="psdthumb">
<li><div class="qq"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>
<li><div class="qq"><img src="http://img1.cache.netease.com/cnews/netease/logo_w.gif" ></div></li>
</div>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>

jojo28
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html语言div图片垂直居中,HTML CSS中如何实现DIV中的图片水平垂直居中对齐
weixin_33367083的博客
05-31 720
HTML CSS中实现DIV中的图片水平垂直居中对方法：所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器)，并且图片位居此容器正中间(中间是指元素容器的正中间)，而图片不是以背景图片(background-image)形式展示，是以元素形式展示的。如下图所示：1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"t...
div图片垂直居中 如何使div中图片垂直居中
09-25
这段CSS代码首先将`.box`类的元素设置为`display: table-cell`，然后利用`vertical-align: middle`让内容垂直居中。`text-align: center`则确保了内部元素的水平居中。对于早期版本的Internet Explorer（主要是IE6和...
div中内容文字垂直居中、文字不换行显示省略号
liyongjian12的博客
03-25 3913
1、行高法 文字的行高和容器的高度相同， p { height:30px; line-height:30px; width:100px; overflow:hidden; } 2、内边距（padding）法 适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中 p { padding:20px 0; } 3、CSS3的transform来实现 .center-v...
div内容垂直居中对齐
SomeDay的专栏
03-25 7480
css垂直居中属性设置vertical-align: middle对div不起作用，例如： DIV垂直居中对齐 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body {text-align: center; vertical-align: middle;} .outer {
CSS进阶篇--div中的内容垂直居中的五种方法
weixin_34007879的博客
09-14 594
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（pa...
div中的内容垂直居中的五种方法
夜空中最亮的星
06-19 969
div中的内容垂直居中的五种方法 一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： 1 p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达
div 垂直居中的六种方法
热门推荐
liufeifeinanfeng的博客
11-23 24万+
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：
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垂直居中
10-30
在网页设计中，让元素（如图片或`div`）在页面上垂直居中是一个常见的需求。本篇将探讨两种方法实现`div`的垂直居中，分别基于CSS的`expression`属性和使用`position: absolute`配合`margin`调整。 首先，我们来看...
DIV以及图片水平垂直居中兼容多种浏览器
09-22
在网页设计中，让元素（如DIV或图片）在页面上水平垂直居中是一项常见的需求。这有助于确保用户无论在何种设备或浏览器上查看页面，都能获得一致的视觉体验。以下将详细介绍两种纯CSS方法以及一种JavaScript辅助的...
DIV+CSS 图片垂直居中效果
10-20
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
div中的内容水平垂直居中
weixin_30535913的博客
12-07 2042
1. div高度自适应的情况 div在不设置高度的时候，会被里面的内容撑开，内容自动填充在div中，无论是一行内容还是多行内容，此时不需要设置垂直居中，内容自动在中间的， 想要看的更直观些，只需要加上padding元素，内容四周便会留下空白，实现水平垂直居中的效果 css代码如下： .demo{ width: 200px; bord...
CSS总结div中的内容垂直居中的五种方法
weixin_34342992的博客
09-14 3088
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它...
第二章-在HTML中使用JavaScript
2301_79858637的博客
07-07 1231
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1067
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 991
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 396
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 242
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 767
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
div中的内容垂直居中
06-06
可以使用CSS中的flex布局来实现将div元素中的内容垂直居中。 例如： ```css .container { display: flex; align-items: center; /* 将内容垂直居中 */ } ``` ```html <div class="container"> <p>这个div元素中的内容垂直居中</p> </div> ``` 在上面的例子中，我们将一个class名为`container`的div元素设为flex布局，并使用`align-items: center`将其子元素（这里是一个p元素）垂直居中。 另外，如果只需要将单行文本垂直居中，也可以使用CSS中的line-height属性，将其设置为与容器高度相同的值即可。 例如： ```css .container { height: 100px; line-height: 100px; /* 将单行文本垂直居中 */ } ``` ```html <div class="container"> 这个div元素中的单行文本垂直居中 </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值