(前端)html与css css 13多种居中方法

Posted 2022-04-15 stevensunyiwen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了(前端)html与css css 13多种居中方法相关的知识，希望对你有一定的参考价值。

一、文字居中

1、水平方向居中:

text-align: center;

2、垂直方向:

①:单行文本居中，行高等于盒子高↓

line-height: 200px;

完整代码、效果图 ↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *
            margin: 0;
            padding: 0;
        
        .header
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            margin: 20px auto;
        
        p
            text-align: center;
            line-height: 200px;
            color: red;
        
      
    </style>
</head>
<body>
    <div class="header">
        <p>哈哈哈哈哈哈哈</p>
    </div>
</body>
</html>

View Code

技术图片

②多行文本垂直居中:不设置盒子高度，用内容撑开高度，内边距上下相等，撑开空白区域。

width: 200px;
padding: 20px;

完整代码、效果图↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *
            margin: 0;
            padding: 0;
        
        .header
            width: 200px;
            padding: 20px;
            /*height: 200px;*/
            border: 1px solid #333;
            margin: 20px auto;
        
        p
            text-align: center;
            line-height: 20px;
            color: red;
        
      
    </style>
</head>
<body>
    <div class="header">
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </div>
</body>
</html>

View Code

技术图片

以上是关于(前端)html与css css 13多种居中方法的主要内容，如果未能解决你的问题，请参考以下文章

python前端HTML和CSS高级

css如何控制文字垂直居底

[前端] html+css+javascript 实现选项卡切换效果

div+css怎么居左居右剧中