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日

悬赏问题

  • ¥15 两台交换机分别是trunk接口和access接口为何无法通信,通信过程是如何?
  • ¥15 C语言使用vscode编码错误
  • ¥15 用KSV5转成本时,如何不生成那笔中间凭证
  • ¥20 ensp怎么配置让PC1和PC2通讯上
  • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
  • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中
  • ¥15 请各位帮我看看是哪里出了问题
  • ¥15 vs2019的js智能提示
  • ¥15 关于#开发语言#的问题:FDTD建模问题图中代码没有报错,但是模型却变透明了
  • ¥15 uniapp的h5项目写一个抽奖动画