【Html】垂直居中-父元素高度确定的多行文本(方法一)
2015-12-10 18:26
591 查看
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:
html代码:
css代码:
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:
html代码:
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码:
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
相关文章推荐
- 【Html】垂直居中-父元素高度确定的单行文本
- 【Html】水平居中总结-不定宽块状元素方法(三)
- Html标签第三课
- 【Html】水平居中总结-不定宽块状元素方法(二)
- 【Html】水平居中总结-不定宽块状元素方法(一)
- window、document、html、body、element的事件属性比较
- html获取url中的参数
- 【Html】水平居中设置-行内元素
- HTML-浮动与清除浮动
- HTML的16个全局属性
- HTML语义化
- C# Winform 中webBrowser显示html内容时禁止错误提示的方法
- html:option
- html判断id是否存在
- ****HTML模板资源汇总
- 115 html IE9的a标签嵌套问题
- Html知识总结
- 【Html】字体缩写
- 使用DOM操纵HTML文档几点粗浅认识
- 区别:DOM Core 与 HTML-DOM