如何让未知尺寸的图片、单行文本、多行文本水平垂直居中？

最新推荐文章于 2021-03-27 13:20:54 发布

ai9312

最新推荐文章于 2021-03-27 13:20:54 发布

阅读量145

点赞数

原文链接：http://www.cnblogs.com/vin-c/p/4141542.html

版权

先看下效果图：

下面是CSS代码：

<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>

下面是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>

转载于:https://www.cnblogs.com/vin-c/p/4141542.html

ai9312

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何让未知尺寸的图片、单行文本、多行文本水平垂直居中？

先看下效果图：下面是CSS代码： <style type="text/css"> /*让未知尺寸的图片、单行文本、多行文本水平垂直居中*/ .wrap { border: 1px solid #0094ff; width: 200px; height: ...
复制链接

扫一扫