如何讓未知尺寸的圖片、單行文本、多行文本水平垂直居中？

時間 2019-12-09

標籤如何未知尺寸圖片單行文本行文水平垂直居中简体版

原文原文鏈接

先看下效果圖：css

下面是CSS代碼：html

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

下面是完整的代碼：spa

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。