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>
  • 相关阅读:
    Bootstrap 实战之响应式个人博客 (一)
    观察者(发布——订阅)模式
    迭代器模式
    代理模式
    策略模式
    单例模式
    CSS3 媒体记
    CSS3 动画记
    css3 过渡记
    CSS3 变形记
  • 原文地址:https://www.cnblogs.com/vin-c/p/4141542.html
Copyright © 2011-2022 走看看