小程序实现文字上下居中的办法 - 加速度jsudo

小程序实现文字上下居中的办法

2023-11-12
11668 瀏覽
4 評論
闻道君

小程序实现文本上下居中,也就是使用父元素高度确定的单行文本的竖直居中的方法来实现,这也是最为基本的方法。

父元素高度确定的多行文本、图片等的竖直居中的方法有两种:

方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:

html代码:

1

2

3

4

看我是否可以居中。p>

5 p>

6 tr>table>

7 body>

css代码:

1 table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

方法二:设置块级元素的 display 为 table-cell(设置为表格单元显示)

但这种方法兼容性比较差,只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,

但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html

1

2

3

看我是否可以居中。p>

4

看我是否可以居中。p>

5

看我是否可以居中。p>

6 p>

7 p>

css

1

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7而且这样修改display的block变成了table-cell,破坏了原有的块状元素的性质。

****更多行业产品开发方案,请关注 加速度****

<以上资讯仅供参考,如需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询获取产品开发方案和报价>

小程序开发 小程序商城 微信小程序
微信客服二维码

加客服微信获取更多内容