div中使文字居中

最新推荐文章于 2023-07-14 13:32:49 发布

重生之我是一名程序员

最新推荐文章于 2023-07-14 13:32:49 发布

阅读量2.7k

点赞数 3

分类专栏： css实例

css实例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>div中使文字居中</title>

    <!-- Bootstrap -->
    <link href="../js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/lib/jquery-3.3.1.js"></script>
    <script src="../js/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">
        #box{
            margin-top: 100px;
            margin-left: 200px;
            width: 100px;
            height: 100px;
            text-align: center;
            border: dashed 1px red;
            display: table;
        }

        #align_div{
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div id="box">
    <div id="align_div">
        <div>文字居中</div>
    </div>
</div>

</body>
</html>

效果截图:
这里写图片描述

重生之我是一名程序员

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
div中使文字居中

html lang="zh-CN">head> meta charset="utf-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1"> title>div中使
复制链接

扫一扫