问答博客资讯标签用户活动
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

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

头像
刘小刘
    91610

    问题描述

    近日学习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

    javascriptflexcss
    阅读 4.7k
    4 个回答
    得票最新
    头像
    xianshenglu
      4.5k21727
      ✓ 已被采纳

      利用伪元素，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>
      头像
      whiteplayer
        2.8k1927

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

        头像
        rain
          5037120243

          搬运工：
          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>
          头像
          supreme
            2.3k12465
            <!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>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题