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

Question

如何使用 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, 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;
        }

Answer 1

您可以使用 flexbox's align-items property (for vertical align) and justify-content 属性（用于水平对齐）：

body {}

#aList {
  height: auto;
  list-style: none;
  margin: 5px, 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>

Answer 2

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

Answer 3

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

body {
}


#aList {
    height: auto;
    list-style:none;
    margin: 5px, 5px, 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 中正确对齐跨度水平居中和垂直居中？

How do you properly align a span horizontally central and vertically central in an li using CSS?

html

css

alignment

html-lists