Cj_C_cc 2023-08-09 17:30 采纳率: 40%
浏览 6

单个主轴元素居中问题

网页html使用flex布局时对于让主轴中某一个元素相对于父级居中的情况不知道怎么解决?
想要实现的图片效果设计图:(想要实现:距离父容器两边边缘的距离都是一样的446px。)

img


其中,“前端开发工程师”(这个部分的文字可变长度),中间的“热门 初级 中级 高级”,右边的:“查看更多”分别是容器里的三个盒子。


```html
尝试:1.使用space-between,但是没有将中间的盒子居中。
     2.对中间元素使用margin:0 auto;,还是没有将中间盒子居中,因为这个margin的边界是左右两个盒子,那两个盒子的长度不同。
     3.对中间元素使用justify-self: center,样式不生效。

  

我真的不知道要怎么解决了,希望可以有高人帮帮忙!如果可以用flex相关的知识解决就更好了,没有也没关系,因为全网我搜不到思路。

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2023-08-09 17:38
    关注
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box{
          display: flex;
          justify-content: space-between;
        }
      </style>
    </head>
    <body>
      <div class="box">
          <div>前端工程师</div>
          <div>
             55555
          </div>
          <div>更多</div>
      </div>
    </body>
    </html>
    

    这样?

    img

    评论

报告相同问题?

问题事件

  • 创建了问题 8月9日