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設置高度后內容區無法居中？