问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

新手提问：关于css的一个简单问题

头像
enjoy
    515
    新手上路，请多包涵
    <body>

 <div style="text-align:center">

 <p style="width:50%">hhh</p>

 </div>

</body>

    我想要实现p标签相对于div居中且宽度只有div的50%，我这样实现不了，该怎么写呢？

    css
    阅读 2.1k
    5 个回答
    得票最新
    头像
    bean
      9815
      ✓ 已被采纳

      水平居中

      1. 使用 inline-block + text-align

        • 原理: 先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
        • 用法: 对子框设置display:inline-block，对父框设置text-align:center。
        • 优点: 兼容性好，甚至可以兼容ie6、ie7
        • 缺点: child里的文字也会水平居中，可以在.child添加text-align:left;还原
        .child {
  width: 50%;
  background: red;
  display: inline-block;
}

.parent {
  text-align: center;
}

  <div class="parent">
    <div class='child'>DEMO</div>
  </div>
      2. margin:0 auto;

      3. 使用absolute+transform

        .child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

      4. flex+justify-content

        .parent {
    display:flex;
    justify-content:center;
}
      头像
      Fractal
        5.5k22434
        <body>
<div style="text-align:center">
<p style="margin:0 auto;width:50%">hhh</p>
</div>
</body>
        头像
        牛书书
          10.1k82035
          p {
    width: 50%;
    margin: 0 auto;
}

          让块级元素（div，p）水平居中，在元素本身使用margin: 0 auto;
          让内联元素（span）水平居中，在其父元素使用text-align: center

          头像
          qinfeng
            1.1k1213
            <body>
<div style="text-align:center">
<p style="display:inline-block;width:50%">hhh</p>
</div>
</body>

            p标签是块级元素

            头像
            Max迪丶先生
              1.8k21424

              这样即可：

              html,body{
    width: 100%;
    height: 100%;
}
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题