text-align水平对齐

最新推荐文章于 2022-10-21 20:54:00 发布

qq_51365561

最新推荐文章于 2022-10-21 20:54:00 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/qq_51365561/article/details/118398081

版权

格式： text-algin:value

left，默认，文字放在左边。
right，文字放在右边。
center，文字放在中间。

text-algin只能能应用在块元素和行内块元素上，而且得给行内块元素设置宽度才能生效，不能应用在行内元素上。(原因：行内元素没位置给它左对齐，右对齐或居中，这就是为什么需要给行内块元素设置宽度）。块元素默认占整行所以在中间，行内块元素设置一个宽度，所以在这个宽度里面居中。

!DOCTYPE html>
<html>

<head>
  <title>第一个小网页</title>
  <meta charset="utf-8" />
  <style>
    span{
      text-align:center;
      display:block;
      width: 60%;
    }
    
  </style>
</head>

<body>
    <span>
      闻名于世的马有很多例如楚霸王的乌骓
    </span>
</body>

</html>

运行后，在这个宽度藜里面居中。在这里插入图片描述
给宽度设置100%，就居中了。

<!DOCTYPE html>
<html>

<head>
  <title>第一个小网页</title>
  <meta charset="utf-8" />
  <style>
    span{
      text-align:center;
      display:block;
      width: 100%;
    }
    
  </style>
</head>

<body>
    <span>
      闻名于世的马有很多例如楚霸王的乌骓
    </span>
</body>

</html>

运行后
在这里插入图片描述

当父元素是块元素或行内块元素，子元素是行内元素或行内块元素时，可以把text-align:value用在父元素上，子元素里的行内元素或行内块元素会生效，而且这个子元素里的子元素也会居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      body{
        text-align:center;
      }
      div{
        width:500px;
        height:500px;
        border: 1px solid red;
        display:inline-block;
      }
    </style>
</head>
<body>
  <div>

  </div>
</body>
</html>

在这里插入图片描述
如图，这个<div>居中了

qq_51365561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
text-align水平对齐

格式： text-algin:valueleft，默认，文字放在左边。right，文字放在右边。center，文字放在中间。text-algin只能能应用在块元素和行内块元素上，不能应用在行内元素上。当父元素是块元素或行内块元素，子元素是行内元素或行内块元素时，可以把text-align:value用在父元素上，子元素里的行内元素或行内块元素会生效<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫