HTML内容设置居中

本文转载自查看原文 2020-07-17 17:07 1140 HTML5

1 内部为行内标签或行内块级标签，水平居中设置 text-align: center 垂直居中设置 line-height 为标签的高度

2.内部为块级标签,水平居中设置 margin: 0 auto; 垂直居中设置 line-height == height (让行高 == 父级标签的高度)

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title>
 5 
 6     </title>
 7 
 8     <!--
 9       水平居中:
10        行内标签  行内-块级标签  text-align: center;
11        块级标签     margin: 0 auto;
12 
13       垂直居中
14          line-height ==  height   (让行高 == 标签的高度)
15     -->
16     <style>
17         div{
18             background-color: red;
19             width: 400px;
20             height: 250px;
21             line-height: 250px;
22 
23             /*水平居中*/
24             text-align: center;
25         }
26 
27         span{
28             background-color: green;
29         }
30 
31         p{
32             background-color: goldenrod;
33             width: 200px;
34             height: 250px;
35             line-height: 250px;
36             /*margin-left: auto;*/
37             /*margin-right: auto;*/
38             margin: 0 auto;
39         }
40 
41         button{
42             width: 200px;
43             height: 200px;
44         }
45     </style>
46 </head>
47 <body>
48     <div>
49         <!--<span>行内标签</span>-->
50         <!--<button>行内-块级标签</button>-->
51         <p>块级标签</p>
52     </div>
53 </body>
54 </html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 html如何设置表格单元格内容垂直居中? 设置input 内容居中显示 . HTML 内容居中方式总结 html中表格table的内容居中显示 html怎样让表格里面的内容居中 div居中和内容居中的css属性设置 gridview1 设置内容居中标题剧中 POI 导出Excel 设置内容居中换行 HTML设置页面居中的五种方式 flutter textfield设置高度后内容区无法居中？