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

Question

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

There's probably more than one way to do it(?) but what is the correct or best way to do it and ensure it is truly centred horizontally and vertically?

There are similar questions in other scenarios but not that work with the li.

This is what I have so far...

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;
        }

score -1 · Accepted Answer · answered Jul 15 '21 at 17:22

You can use flexbox's align-items property (for vertical align) and justify-content property (for horizontal align):

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>

There looks like there's slightly more space on the right of the text than on the left? Is that a side-effect of justifying the content, rather than true aligning? — D.Man, Jul 15 '21 at 17:43
@D.Man I don't see slightly more space on the right. It might be different for me. Would you like to send a screenshot? — Spectric, Jul 15 '21 at 17:47

score -2 · Answer 2 · edited Jul 15 '21 at 20:10

-2

Try using text-align: center; on the li span, and you'll have to set the top margin accordingly for each to get it down from the top, as well as using a line-height

edited Jul 15 '21 at 20:10

Spectric

30,714
6
20
43

answered Jul 15 '21 at 17:25

skivecore

17
1
9

score -2 · Answer 3 · answered Jul 15 '21 at 17:33

The use of flex-box was awesome only that there is so many unnecessary use of css lines. I edited them and hope things look better now. I could have added a comment but my star is too low for that.

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>

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

3 Answers3