前端知识点1-text align是写在父级居中还是子级

最新推荐文章于 2023-10-04 11:55:04 发布

前端歌谣

最新推荐文章于 2023-10-04 11:55:04 发布

阅读量164

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_41632427/article/details/128423293

版权

前端小案例小结专栏收录该内容

1038 篇文章 3 订阅

订阅专栏

<!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>
  </head>
  <body>
    <!-- text-align水平居中是对父级使用还是子级使用  -->
    <div style="width: 100px; height: 100px; border: 1px solid #ccc">
      <p>居中</p>
    </div>
    <div style="width: 100px; height: 100px; border: 1px solid #ccc">
      <p style="text-align: center">居中</p>
    </div>
    <div
      style="
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        text-align: center;
      "
    >
      <p>居中</p>
      <!-- text-align属性，只对子元素起作用，并且可以被子元素继承 -->
    </div>
  </body>
</html>