zoukankan      html  css  js  c++  java
  • 如何让未知尺寸的图片、单行文本、多行文本水平垂直居中?

    先看下效果图:

    QQ截图20141203221017

    下面是CSS代码:

    <style type="text/css">
            /*让未知尺寸的图片、单行文本、多行文本水平垂直居中*/
            .wrap {
                border: 1px solid #0094ff;
                 200px;
                height: 200px;
                /*下面是实现垂直居中的关键,没有之一*/
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
    
                .wrap .subwrap .content img {
                    /*清除图片下方出现几像素的空白间隙*/
                    vertical-align: middle;
                }
    
                .wrap .subwrap .single {
                    /*让单行文本在容器内垂直居中,只需设置文本的行高等于容器的高度即可*/
                    line-height: 200px;
                }
    
            /*IE 7 以下浏览器*/
            .wrap {
                *display: block;
                *position: relative;
                *float:left;
            }
    
                .wrap .subwrap {
                    *position: absolute;
                    *top: 50%;
                    *left: 50%;
                }
    
                    .wrap .subwrap .content {
                        *position: relative;
                        *top: -50%;
                        *left: -50%;
                    }
        </style>

     

    下面是HTML代码:

    <h3>实现未知尺寸的图片、单行文本、多行文本水平垂直居中</h3>
        <div class="wrap">
            <div class="subwrap ">
                <div class="content ">
                    <img src="http://static.cnblogs.com/images/logo_small.gif" />
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="subwrap ">
                <div class="content single">
                    单行文本
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="subwrap ">
                <div class="content ">
                    多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中
                </div>
            </div>
        </div>

    下面是完整的代码:

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>让未知尺寸的图片、单行文本、多行文本水平垂直居中</title>
        <style type="text/css">
            /*让未知尺寸的图片、单行文本、多行文本水平垂直居中*/
            .wrap {
                border: 1px solid #0094ff;
                width: 200px;
                height: 200px;
                /*下面是实现垂直居中的关键,没有之一*/
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
    
                .wrap .subwrap .content img {
                    /*清除图片下方出现几像素的空白间隙*/
                    vertical-align: middle;
                }
    
                .wrap .subwrap .single {
                    /*让单行文本在容器内垂直居中,只需设置文本的行高等于容器的高度即可*/
                    line-height: 200px;
                }
    
            /*IE 7 以下浏览器*/
            .wrap {
                *display: block;
                *position: relative;
                *float:left;
            }
    
                .wrap .subwrap {
                    *position: absolute;
                    *top: 50%;
                    *left: 50%;
                }
    
                    .wrap .subwrap .content {
                        *position: relative;
                        *top: -50%;
                        *left: -50%;
                    }
        </style>
    </head>
    
    <body>
        <h3>实现未知尺寸的图片、单行文本、多行文本水平垂直居中</h3>
        <div class="wrap">
            <div class="subwrap ">
                <div class="content ">
                    <img src="http://static.cnblogs.com/images/logo_small.gif" />
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="subwrap ">
                <div class="content single">
                    单行文本
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="subwrap ">
                <div class="content ">
                    多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中
                </div>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    NeoFinder for Mac(增强型文件管理工具)破解版安装
    Monodraw for Mac(基于 ASCII 码设计编辑工具)破解版安装
    SNF开发平台WinForm-审核流使用方法样例
    SNF快速开发平台MVC-Grid++集成打印
    SNF快速开发平台MVC-富文本控件集成了百度开源项目editor
    C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集
    SNF快速开发平台MVC-EasyUI3.9之-WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法
    SNF快速开发平台--规则引擎在程序当中如何调用
    SNF快速开发平台--规则引擎介绍和使用文档
    SNF快速开发平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右键菜单
  • 原文地址:https://www.cnblogs.com/vin-c/p/4141542.html
Copyright © 2011-2022 走看看