如何使用 CSS 在 li 中正确地将跨度水平居中和垂直居中对齐？

如何解决如何使用 CSS 在 li 中正确地将跨度水平居中和垂直居中对齐？

如何使用 CSS 在 li 中水平和垂直居中正确对齐跨度？

可能有不止一种方法可以做到（？），但正确或最好的方法是什么，并确保它真正水平和垂直居中？

在其他场景中也有类似的问题，但不适用于 li。

这是我目前所拥有的...

html：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8" />
    <link href="css/list.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div>
        <ul id="aList">
            <li><span>Bob Smith</span></li>
            <li><span>Joe</span></li>
            <li><span>Lisa Henson</span></li>
            <li><span>Freddy Tallman</span></li>
            <li><span>Sarah Jones</span></li>
        </ul>
    </div>
</body>
</html>

CSS：

body {
}


#aList {
    
    height: auto;
    list-style:none;
    margin: 5px,5px,30px;
    font-size: 20px;
    border: 1px red solid;
    padding: 5px;
    width: 500px;
    display: inline-block;
    text-align:center;
}

    #aList li {
        text-align: center;
        min-height: 50px;
        height: auto;
        border: 1px green solid;
        padding: 2px;
        margin: 10px;
    }

        #aList li span {
            border: 1px blue solid;
        }

解决方法

您可以使用 flexbox 的 align-items 属性（用于垂直对齐）和 justify-content 属性（用于水平对齐）：

body {}

#aList {
  height: auto;
  list-style: none;
  margin: 5px,5px,30px;
  font-size: 20px;
  border: 1px red solid;
  padding: 5px;
  width: 500px;
  display: inline-block;
  text-align: center;
}

#aList li {
  text-align: center;
  min-height: 50px;
  height: auto;
  border: 1px green solid;
  padding: 2px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#aList li span {
  border: 1px blue solid;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link href="css/list.css" rel="stylesheet" />
  <title></title>
</head>

<body>
  <div>
    <ul id="aList">
      <li><span>Bob Smith</span></li>
      <li><span>Joe</span></li>
      <li><span>Lisa Henson</span></li>
      <li><span>Freddy Tallman</span></li>
      <li><span>Sarah Jones</span></li>
    </ul>
  </div>
</body>

</html>

尝试在 text-align: center; 上使用 li span，您必须相应地为每个设置顶部边距以使其从顶部向下，以及使用 line-height

flex-box 的使用很棒，只是有很多不必要的 css 行使用。我编辑了它们，希望现在看起来更好。我可以添加评论，但我的星级太低了。

body {
}


#aList {
    height: auto;
    list-style:none;
    margin: 5px,30px;
    font-size: 20px;
    border: 1px red solid;
    padding: 5px;
    width: 500px;
    display: inline-block;
}

    #aList li {
        min-height: 50px;
        border: 1px green solid;
        padding: 2px;
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #aList li span {
            border: 1px blue solid;
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="css/list.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div>
        <ul id="aList">
            <li><span>Bob Smith</span></li>
            <li><span>Joe</span></li>
            <li><span>Lisa Henson</span></li>
            <li><span>Freddy Tallman</span></li>
            <li><span>Sarah Jones</span></li>
        </ul>
    </div>
</body>
</html>

如何使用 CSS 在 li 中正确地将跨度水平居中和垂直居中对齐？

如何解决如何使用 CSS 在 li 中正确地将跨度水平居中和垂直居中对齐？

解决方法

相关推荐