html居中代码怎么写？

最新推荐文章于 2024-04-12 11:37:26 发布

Learn-anything

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量5.7w

点赞数 12

分类专栏： HTML 文章标签： html css css3

本文链接：https://blog.csdn.net/fanlehai/article/details/121347694

版权

HTML 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

`<div>`居中 - 法1

通过中心点，计算坐标来垂直居中。

<html>

<head>
    <style type="text/css">
        .content {
            background-color: rgb(87, 87, 92);
            position: absolute;
            /* 水平居中 */
            left: 50%;
            width: 30%;
            margin-left: -15%;
            /* 垂直居中 */
            top: 50%;
            height: 30%;
            margin-top: -15%;
        }
    </style>
</head>

<body>
    <div class="content">Content goes here</div>
</body>

</html>

`<div>`居中 - 法2

<html>

<head>
    <style type="text/css">
        #content {
            position: absolute;
            /* 垂直居中 */
            top: 0;
            bottom: 0;
            height: 50%;
            /* 水平居中 */
            left: 0;
            right: 0;
            width: 70%;
            margin: auto;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="content"> Content here</div>
</body>

</html>

垂直居中：vertical-align

设置单行或表格单元格内元素，垂直方向上的位置，不能用块级元素。可用属性值：top middle bottom 等，详细说明.

<html>

<head>
    <style type="text/css">
        .middle {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        An
        <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32"
            height="32" />
        image with a middle alignment.
    </div>
</body>

</html>

文字居中：`line-height`

将文字line-height等于父容器的高度，即可垂直方向上居中；text-align可让文在水平方向上居中。

<html>
<head>
    <style type="text/css">
        #wrapper {
            height: 100px;
            background-color: red;
        }

        .content {
            /* 文字垂直居中 */
            line-height: 100px;
            /* 文字水平居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <p class="content">Content goes here</p>
    </div>
</body>

</html>

参考链接

html居中代码怎么写？

Learn-anything

关注

12
点赞
踩
64

收藏

觉得还不错? 一键收藏
1
评论
html居中代码怎么写？

<div>居中 - 法1通过中心点，计算坐标来垂直居中。<html><head> <style type="text/css"> .content { background-color: rgb(87, 87, 92); position: absolute; /* 水平居中 */ left: 50%; wid
复制链接

扫一扫