美文网首页
CSS-小技巧-垂直居中设置

CSS-小技巧-垂直居中设置

作者: 傻小子不会起名字 | 来源:发表于2015-12-08 12:10 被阅读0次

切 你以为总结完水平,就不能干一下垂直了吗!

geekwangc
  • 父元素高度确定的单行文本

通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码:
html:
<div class="container"> hi,imooc!</div>
css代码:
<style>.container{ height:100px; line-height:100px; background:#999;}</style>

  • 父元素高度确定的多行文本、图片、块状元素

方法一:使用插入 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,所以我们不需要显式地设置了。
方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
html代码:
<div class="container"><div>
<p>看我是否可以居中。</p>
</div></div>
css代码:
<style>
.container{ height:300px; background:#ccc; display:table-cell;
/IE8以上及Chrome、Firefox/ vertical-align:middle;/IE8以上及Chrome、Firefox/}</style>
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

相关文章

  • CSS-小技巧-垂直居中设置

    切 你以为总结完水平,就不能干一下垂直了吗! 父元素高度确定的单行文本 通过设置父元素的 height 和 lin...

  • flex布局

    flex布局小技巧,想要让元素水平垂直居中,可以设置为margin:auto auto;

  • CSS-小技巧-水平居中设置

    好吧,被发现了,其实我在写学习笔记 水平居中设置 行内元素如果被设置元素为文本、图片等行内元素时,水平居中是通过给...

  • 设置居中样式

    在css中居中效果可以分为:水平居中、垂直居中、水平垂直居中三种。最近小程序开发项目中也经常遇到居中效果设置问题,...

  • 垂直居中,水平居中

    CSS设置行内元素的水平居中 CSS设置行内元素的垂直居中 CSS设置块级元素的水平居中 CSS设置块级元素的垂直居中

  • CSS display: table-cell 用于水平垂直居中

    CSS display: table-cell 用于水平垂直居中 在 CSS 设置居中时候,水平和垂直居中的设置略...

  • css-垂直居中

    - 居中vs不居中 代码 - 绝对定位实现居中 代码 高度,宽度不固定的话无法使用该方法,css3可在该需要居...

  • CSS综合

    编码规范 设置上下padding垂直居中 使用绝对定位垂直居中 使用vertical-align垂直居中 使用ta...

  • 前端 & 小测

    点亮星星 文本打点-单行 用户体验&实现 文字垂直居中 CSS-宽高定比例展示 【IE】CSS版本兼容&JS检测 ...

  • LayaBox:富文本HtmlDivElement垂直水平居中

    注意:目前不支持文本的垂直居中对齐 示例:文本垂直水平居中(文本的垂直居中使用padding替代设置) 重点解析:...

网友评论

      本文标题:CSS-小技巧-垂直居中设置

      本文链接:https://www.haomeiwen.com/subject/buyehttx.html