CSS 文本装饰样式垂直对齐

最新推荐文章于 2024-11-01 15:27:05 发布

卋舉

最新推荐文章于 2024-11-01 15:27:05 发布

阅读量83

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120659739

版权

css html html5

CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

内边距 padding:18px;
正中心 line-height:300px;
右下角 display:table-cell;
vertical-align:bottom;
box-sizing: border-box;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>垂直对齐</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 内边距 padding:18px;
        正中心 line-height:300px;
        右下角 display:table-cell;
              vertical-align:bottom;
     -->
    <style>
        .box {
            box-sizing: border-box;
            /*内边距*/
            padding: 18px;
            width: 500px;
            height: 300px;
            background-color: aqua;
            /*居中 center;左边 left; 右边 rigth*/
            text-align: right;
            /*正中心*/
            /*line-height: 300px;*/
            /*右下角*/
            display: table-cell;
            /*top middle bottom*/
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div class="box">hello</div>
</body>
</html>