【免费】完美居中1资源-CSDN文库

需积分: 0 24 浏览量 2022-08-08 20:38:35 上传评论收藏 51KB DOCX 举报

资源详情

资源评论

资源推荐

图片、不固定的多行文字垂直居中

任何疑问都可以咨询本人：148334733

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>测试页面</title>

<style>

.my {width:1000px;height:200px;margin:0 auto;background-color:#fff;text-align:

center;display: table-cell;vertical-align:middle; *display:inline-block; //针对 IE6/7}

</style>

<script></script>

</head>

<body>

<div class="my">

想必写 css 的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想

过让行数不固定的文字在高度固定的容器内垂直居中呢？

<img src="images/user.gif"/> //个人感觉，无论文字还是 img 都是行内元素。

</div>

</body>

</html>

2.解释：

父 DIV 设置了 display:table-cell;vertical-align:middle;文字和图片，都会因此垂直居中。这里，

display:table-cell 其实就是把这些元素变为<td>标签里面的东西一样,vertical-align:middle 就实

现了垂直。这里，vertical-align 并不是唯一 td 所使用的一个 CSS 样式，自己感觉了下，认为

这个属性是专门针对行内元素的，用来定义行内元素的基线相对于该元素所在行的基线的垂

直对齐.（所以，两种情况，第一种是针对 TD，第二种是针对行内元素，记住，这个属性只

是针对行内元素，不能针对块级元素去设置其属性。）

例子：

<img src="images/sample.jpg" align="absmiddle" />

OR

<img src="images/sample.jpg" style="vertical-align:middle;" />

Td 有两个好处：

1. 宽度自动调节

2. 同行等高，如果有两个 display:table-cell 属性的 DIV，他们的内容会等高。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

内容反馈

啊看看

粉丝: 28
资源: 323

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip