如何使用 CSS 在 li 中正确对齐 span 水平居中和垂直居中？ [复制]答案

【问题标题】：How do you properly align a span horizontally central and vertically central in an li using CSS? [duplicate]如何使用 CSS 在 li 中正确对齐 span 水平居中和垂直居中？ [复制]
【发布时间】：2021-07-16 04:10:42
【问题描述】：

如何使用 CSS 正确对齐 li 中水平和垂直中心的 span？

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

在其他情况下也有类似的问题，但不适用于 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;
        }

【问题讨论】：

标签： html css alignment html-lists

【解决方案1】：

您可以使用flexbox 的align-items 属性（用于垂直对齐）和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>

【讨论】：

文本右侧的空间似乎比左侧多一些？这是证明内容合理而不是真正对齐的副作用吗？
@D.Man 我没有看到右边有更多的空间。对我来说可能会有所不同。要发送屏幕截图吗？
可能只是我的眼睛。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

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

【讨论】：