一行或者多行垂直居中问题
来源:互联网 发布:做淘宝电脑配置 编辑:程序博客网 时间:2024/06/02 18:28
在实际开发中,我们会遇到很多需要多行垂直居中的问题,今天空闲做个总结。
1.首先一行问题我就不用说了,给一个line-height一般都能够解决垂直居中的问题。
但是如果是下面这中格式那该如何处理呢?
<div> <p>多行多行多行多行</p> <p>多行多行多行多行</p></div>
方法一:也是最重要的。虽然这个方法不兼容ie6 ie7
给div一个父盒子将父盒子的css设置为display:table。子盒子display:table-cell vertical-align:middle text-align:center
方法二这个方法就是万能的了。代码就不上了。讲一下思路吧
首先还是给最大的盒子display:table。利用表格垂直居中的属性。
其次给内容和子进行绝对定位。相关内容margin-left:-50%;
本人实践,没有问题。如对您有帮助,请支持一下。
阅读全文
0 0
- 一行或者多行垂直居中问题
- 一行或者多行垂直居中问题
- duilib 多行垂直居中问题.
- 文字与图片在同一行垂直居中问题
- 一行、多行文本垂直居中的CSS实例说明
- 水平垂直居中问题
- UILabel 垂直居中问题
- div垂直居中问题
- 垂直居中问题
- 垂直居中问题
- 图片垂直居中问题
- 图片和文字在一行垂直居中
- 一行居中问题
- div居中问题垂直居中,垂直水平居中
- CStatic Text实现多行垂直居中
- CSS 垂直居中问题总结
- 水平垂直居中问题解法
- 关于垂直居中的问题
- intellij idea 显示打开文件路径按钮
- java栈、堆、方法区详解
- 使用Qt+OpenGL创建球体+简单交互
- window对象下open、close、opener函数的使用
- QUIC和TCP--为什么多线程下载比单线程快
- 一行或者多行垂直居中问题
- Linux下设置mysql和tomcat开机启动
- springMVC原理(一):SpringMVC入门
- C++面向对象(5)
- JZOJ2017.08.08 B组
- python 中如何实现一行输入多个值 ?
- Android基础总结五:Service总结
- 【高通6模全网通智能模块】MSM8909 ,可支持二次开发
- ORA-16032: parameter LOG_ARCHIVE_DEST_1 destination string cannot be translated