flex如何实现两个子元素一个左上一个居中

问题描述

近日学习flex布局,看到阮一峰老师有色子的布局训练,所以按照图片练习布局,在练习到两个圆点一个左上一个居中的时候发现有个问题,居中的那个元素只能垂直居中,无法水平居中,请教各位大神如何解决?

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex测试</title>
    <style>
        ul,li {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        ul{
            width: 100px;
            height: 100px;
            background-color: black;
            border-radius: 10px;
            display: flex;
            
        }
        li{
            background-color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        li:nth-child(2){
            align-self: center;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

你期待的结果是什么?实际看到的错误信息又是什么?

想要达到的效果:

clipboard.png

现在实际做出来的效果:

clipboard.png

阅读 447
评论 更新于 6月16日
    4 个回答

    利用伪元素,flex 暂时还没有 justify-self

    demo

    代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Flex测试</title>
      <style>
        ul,
        li {
          padding: 0px;
          margin: 0px;
          list-style: none;
        }
    
        ul {
          width: 100px;
          height: 100px;
          background-color: black;
          border-radius: 10px;
          display: flex;
          justify-content: space-between;
    
        }
    
    
        li,
        ul::after {
          background-color: white;
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
    
        ul::after {
          content: '';
          visibility: hidden; 
        }
    
    
        li:nth-child(2) {
          align-self: center;
        }
      </style>
    </head>
    
    <body>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </body>
    
    </html>
    评论 赞赏 6月16日

      align-self本来就不能水平居中,它替换的是父容器的align-items属性。

      评论 赞赏 6月15日

        搬运工:
        clipboard.png
        display:flex;
        当不设置flex-direction时默认为flex-direction:row,既主轴为水平方向,所以本来li应该是竖向排列的变成了两个挨在一起的横向排列,又因为你对第二个li设置了align-self:center,由图可知,此作用于子项纵轴(竖向)对齐方式,故而,第二li个垂直居中却没有水平居中.

        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Flex测试</title>
            <style>
                ul,
                li {
                    padding: 0px;
                    margin: 0px;
                    list-style: none;
                }
        
                ul {
                    width: 100px;
                    height: 100px;
                    background-color: black;
                    border-radius: 10px;
                    display: flex;
                    position: relative;
                }
        
                li {
                    background-color: white;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                }
        
                li:nth-child(2) {
                    align-self: center;
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%);
                }
            </style>
        </head>
        
        <body>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </body>
        
        </html>
        评论 赞赏 6月15日
          supreme
          • 2.3k
          <!DOCTYPE html>
          <html lang="en">
          
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Flex测试</title>
            <style>
              * {
                padding: 0;
                margin: 0
              }
          
              ul,
              li {
                padding: 0px;
                margin: 0px;
                list-style: none;
              }
          
              ul {
                width: 100px;
                height: 100px;
                background-color: black;
                border-radius: 10px;
                display: flex;
          
              }
          
              li {
                background-color: white;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin: 6px;
              }
          
              li:nth-child(1) {
                -webkit-align-self: flex-start;
                align-self: flex-start;
              }
          
              li:nth-child(2) {
                -webkit-align-self: center;
                align-self: center;
              }
            </style>
          </head>
          
          <body>
            <ul>
              <li></li>
              <li></li>
            </ul>
          </body>
          
          </html>
          评论 赞赏 6月16日
            撰写回答

            登录后参与交流、获取后续更新提醒