zoukankan      html  css  js  c++  java
  • css垂直居中的几种方式

      

    1. 对于可以一行处理的 设置 height:apx; line-height:apx;

    2.对于一段文字(会多行显示的)
                ->2.1如果是可以设置一个固定高度的
                        父元素使用display:table; height: apx;  子元素使用 display:table-cell; vertical-align:middle;

         note: vertical-align属性只对部分html元素有效 具体是拥有valign特性的(X)HTML标签

                           比如<img>       基本上 对于inline-block显示的元素(内联元素)有效

        ->2.2如果是一个高度不固定的
                        设置上下 一样的内补 padding-top:apx; padding-bottom:apx;

                ->2.3 使用csshack支持ie6 垂直居中 综合考虑 table-cell方案 多层嵌套
                        div#wrap {
                            display:table;
                            border:1px solid #FF0099;
                            background-color:#FFCCFF;
                            760px;
                            height:400px;
                            _position:relative;
                            overflow:hidden;
                        }

                        div#subwrap {
                            vertical-align:middle;
                            display:table-cell;
                            _position:absolute;
                            _top:50%;
                        }

                        div#content {
                            _position:relative;
                            _top:-50%;
                        }

    参考:http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

  • 相关阅读:
    ubuntu 防止软件包自动更新
    记录一个开头带有&#x的特征数据的解码
    从一次失败的微信小程序抓包、反编译经历中学习反思
    Python爬虫处理奇葩的请求参数payload
    python爬虫
    python爬虫处理在线预览的pdf文档
    python高级—— 从趟过的坑中聊聊爬虫、反爬、反反爬,附送一套高级爬虫试题
    djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记
    django 问题综合
    vue(9)—— 组件化开发
  • 原文地址:https://www.cnblogs.com/isdom/p/webtips008.html
Copyright © 2011-2022 走看看