How is it possible to align two <li> content vertically when one embed an image inside an anch-CodePudding

I am trying to render an HTML unordered list horizontally with each item having the same length and same height. Both items embed a link. One of the two embed an image. I would like to have item aligned vertically.

I use the flex display but am not able to align li content vertically.

In the following example Some text and the image (here Logo), i.e. both orange bordered boxes, should be vertically aligned, which is not the case.

I do not want to change the HTML code (do not want to change the given semantic nor adding element which do not give any new HTML information) but only the CSS .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset='utf-8' />
    <style type='text/css'>
      * {
          margin: 0;
          padding: 0;
          border: 0;
          box-sizing: border-box;
      }

      #navbar {
          background:silver;
      }

      #navbar ul {
          display: flex;
          flex-wrap: wrap;
          list-style: none;
      }

      #navbar ul > li {
          flex: 1;
          border: 5px dotted green;
      }
      
      #navbar a {
          border: 5px dotted orange;
      }
      #navbar img {
          height: 80px;
          vertical-align:middle;
      }   
    </style>
    <title></title>
  </head>

  <body>
  <body>
    <nav id="navbar">
      <ul>
        <li><a href="#">Some text</a></li>
        <li><a id="logo" href="#"><img src="data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8 CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9IkNhbHF1ZV8xIgogICBkYXRhLW5hbWU9IkNhbHF1ZSAxIgogICB2aWV3Qm94PSIwIDAgNzYxLjEyIDMyMi4yMyIKICAgdmVyc2lvbj0iMS4xIgogICBzb2RpcG9kaTpkb2NuYW1lPSJsb2dvLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjIgKGU4NmM4NzA4NzksIDIwMjEtMDEtMTUpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1NSI CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE CiAgPGRlZnMKICAgICBpZD0iZGVmczUzIj4KICAgIDxyZWN0CiAgICAgICB4PSIxNy44MDgwNTMiCiAgICAgICB5PSIzNi43NzM1NjIiCiAgICAgICB3aWR0aD0iNzExLjkxNzYxIgogICAgICAgaGVpZ2h0PSIyNDcuNTQzMjMiCiAgICAgICBpZD0icmVjdDk1NyIgLz4KICA8L2RlZnM CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTYiCiAgICAgaWQ9Im5hbWVkdmlldzUxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIyLjA0Njk4MzQiCiAgICAgaW5rc2NhcGU6Y3g9IjM4Ni4wNjUyMiIKICAgICBpbmtzY2FwZTpjeT0iMTYxLjExNTAxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhbHF1ZV8xIgogICAgIGlua3NjYXBlOnNuYXAtdGV4dC1iYXNlbGluZT0idHJ1ZSIgLz4KICA8cmVjdAogICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlLXdpZHRoOjMuNzg7c3Ryb2tlLWRhc2hvZmZzZXQ6MC4zNzg7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICBpZD0icmVjdDg4MCIKICAgICB3aWR0aD0iNzYwLjU5MjEiCiAgICAgaGVpZ2h0PSIzMjAuMTE3NDMiCiAgICAgeD0iMC4yMzY5ODY0OSIKICAgICB5PSIwLjgyMDcwODg3IgogICAgIHJ5PSIzLjM1Njg5ZS0xNSIgLz4KICA8dGV4dAogICAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgICAgaWQ9InRleHQ5NTUiCiAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXNpemU6NDBweDtsaW5lLWhlaWdodDoxLjI1O2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7d2hpdGUtc3BhY2U6cHJlO3NoYXBlLWluc2lkZTp1cmwoI3JlY3Q5NTcpO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTsiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMy41NTI5NDg4LDAsMCwzLjU1Mjk0ODgsMTEwLjI5MzgxLC00My43ODI5MTcpIj48dHNwYW4KICAgICAgIHg9IjE3LjgwODU5NCIKICAgICAgIHk9IjcyLjE2NDA2MiI PHRzcGFuPkxPR088L3RzcGFuPjwvdHNwYW4 PC90ZXh0Pgo8L3N2Zz4K" alt="Some Logo" /></a></li>
      </ul>
    </nav>
  </body>
</html>

CodePudding user response：

You could add align-items: center; to the container that has display: flex; as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset='utf-8' />
    <style type='text/css'>
      * {
          margin: 0;
          padding: 0;
          border: 0;
          box-sizing: border-box;
      }

      #navbar {
          background:silver;
      }

      #navbar ul {
          display: flex;
          flex-wrap: wrap;
          list-style: none;
          align-items: center;
      }

      #navbar ul > li {
          flex: 1;
          border: 5px dotted green;
      }
      
      #navbar a {
          border: 5px dotted orange;
      }
      #navbar img {
          height: 80px;
          vertical-align:middle;
      }   
    </style>
    <title></title>
  </head>

  <body>
  <body>
    <nav id="navbar">
      <ul>
        <li><a href="#">Some text</a></li>
        <li><a id="logo" href="#"><img src="data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8 CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9IkNhbHF1ZV8xIgogICBkYXRhLW5hbWU9IkNhbHF1ZSAxIgogICB2aWV3Qm94PSIwIDAgNzYxLjEyIDMyMi4yMyIKICAgdmVyc2lvbj0iMS4xIgogICBzb2RpcG9kaTpkb2NuYW1lPSJsb2dvLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjIgKGU4NmM4NzA4NzksIDIwMjEtMDEtMTUpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1NSI CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE CiAgPGRlZnMKICAgICBpZD0iZGVmczUzIj4KICAgIDxyZWN0CiAgICAgICB4PSIxNy44MDgwNTMiCiAgICAgICB5PSIzNi43NzM1NjIiCiAgICAgICB3aWR0aD0iNzExLjkxNzYxIgogICAgICAgaGVpZ2h0PSIyNDcuNTQzMjMiCiAgICAgICBpZD0icmVjdDk1NyIgLz4KICA8L2RlZnM CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTYiCiAgICAgaWQ9Im5hbWVkdmlldzUxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIyLjA0Njk4MzQiCiAgICAgaW5rc2NhcGU6Y3g9IjM4Ni4wNjUyMiIKICAgICBpbmtzY2FwZTpjeT0iMTYxLjExNTAxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhbHF1ZV8xIgogICAgIGlua3NjYXBlOnNuYXAtdGV4dC1iYXNlbGluZT0idHJ1ZSIgLz4KICA8cmVjdAogICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlLXdpZHRoOjMuNzg7c3Ryb2tlLWRhc2hvZmZzZXQ6MC4zNzg7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICBpZD0icmVjdDg4MCIKICAgICB3aWR0aD0iNzYwLjU5MjEiCiAgICAgaGVpZ2h0PSIzMjAuMTE3NDMiCiAgICAgeD0iMC4yMzY5ODY0OSIKICAgICB5PSIwLjgyMDcwODg3IgogICAgIHJ5PSIzLjM1Njg5ZS0xNSIgLz4KICA8dGV4dAogICAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgICAgaWQ9InRleHQ5NTUiCiAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXNpemU6NDBweDtsaW5lLWhlaWdodDoxLjI1O2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7d2hpdGUtc3BhY2U6cHJlO3NoYXBlLWluc2lkZTp1cmwoI3JlY3Q5NTcpO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTsiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMy41NTI5NDg4LDAsMCwzLjU1Mjk0ODgsMTEwLjI5MzgxLC00My43ODI5MTcpIj48dHNwYW4KICAgICAgIHg9IjE3LjgwODU5NCIKICAgICAgIHk9IjcyLjE2NDA2MiI PHRzcGFuPkxPR088L3RzcGFuPjwvdHNwYW4 PC90ZXh0Pgo8L3N2Zz4K" alt="Some Logo" /></a></li>
      </ul>
    </nav>
  </body>
</html>

CodePudding user response：

change your navbar css like this

#navbar ul {
display: flex;
flex-direction:column;
align-items:center;
flex-wrap: wrap;
list-style: none;
}