html中代码文字居中怎么写？

小灰灰 2020-04-23 08:15 1131阅读 0赞

html中代码文字居中怎么写？

文字水平居中

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>水平居中</title>
  6.         <style>
  7.             .box {
  8.                 width: 300px;
  9.                 height: 200px;
  10.                 background: palegoldenrod;
  11.                 text-align:center;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <div class="box">水平居中了--文本文字</div>
  17.     </body>
  18. </html>

效果图：

说明：text-align

text-align是一个基本的属性，它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐和居中，想要使文本居中，直接使用center即可。

该属性设置文本和img标签等一些内联对象（或与之类似的元素）的居中。

文字垂直居中

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>垂直居中</title>
  6.         <style>
  7.             .box {
  8.                 width: 300px;
  9.                 height: 300px;
  10.                 background: paleturquoise;
  11.                 line-height:300px;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <div class="box">垂直居中了--文本文字</div>
  17.     </body>
  18. </html>

效果图：

line-height 属性设置行间的距离（行高）。不允许使用负值。

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

发表评论

表情：
评论列表 （有 0 条评论，1131人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css文字居中怎么打

    CSS text-align 我们设置3个盒子，分别都设置盒子CSS高度、CSS宽度相同，再分别设置三个盒子里内容靠左对齐、居中对齐、靠右对齐。 我们都设置3个盒子高度...

    你的名字你的名字/ 0 赞/ 834 阅读