如何在我的地址栏中对齐文本和内联图像

Question

我的地址栏中有 3 个项目，电子邮件； phone 和 Instagram。 instagram 标签是 png，而 T 和 E 是 txt。现在 txt 部分可以很好地调整大小，但是 instagram png 使列表变得杂乱无章，并导致

项目错误地调整大小并从不同的位置开始。

有人知道如何对齐我的 txt 吗？

到目前为止我的代码：

.contact {
  display: block;
  overflow: hidden;
  position: fixed;
  bottom: 40%;
  margin-left: 4%;
}

address ul {
  font-style: normal;
  list-style-type: none;
  font-family: 'Adobe Tamil';
  font-size: 4vw;
  line-height: 72px;
  color: #EE401C;
  color: rgb(238, 64, 28);
  text-outline: #FF9244;
  text-outline: rgb(255, 146, 68);
}

.eersteletter {
  font-style: normal;
  list-style-type: none;
  font-family: 'Adobe Tamil';
  font-size: 4.1vw;
  line-height: 72px;
  color: #FF9244 !important;
  color: rgb(238, 64, 28);
  text-outline: #FF9244;
  text-outline: rgb(255, 146, 68);
}

<div class="contact">
  <address>
   <ul>
    <li>
    <a href="tel:0031648852" style="text-decoration: inherit;color: #EE401C"><span class="eersteletter">T</span> +31 6 488 52 11 6
    </a></li>
    <li>
    <a href="mailto:contact@catobexxnchop.nl" style="text-decoration: inherit;color: #EE401C"> <span class="eersteletter">E</span> contact@catobenschop.nl
    </a></li>
    <li><img src="images/instatag" style="vertical-align: middle;" alt="insta logo">
    <a href="https://www.instagram.com/catobenscjsjshop/" target="_blank" style="text-decoration: inherit;color: #EE401C">
    catobenschop</a></li>
    </ul>
   </address>
</div>

Tx 寻求帮助，如果有任何不清楚/问题已经在其他地方得到回答，请告诉我。

太！！

Answer 1

在 insta 徽标中添加一个 class，并根据尺寸指定宽度。

<li><img class="insta-logo" src="example.com/png" alt="insta logo"><a href="example.com" target="_blank">catobenschop</a></li>

/*CSS*/
.insta-logo {
    vertical-align: middle;
    width: 10%;
    margin-right: 20px;
}
li a {
    text-decoration: none;
    color: #EE401C;
}

.contact {
      display: block;
      overflow: hidden;
      position: fixed;
      bottom: 40%;
      margin-left: 4%;
    }
    .insta-logo {
        vertical-align: middle;
        width: 10%;
        margin-right: 20px;
    }
    li a {
    text-decoration: none;
    color: #EE401C;
    }
    address ul {
      font-style: normal;
      list-style-type: none;
      font-family: 'Adobe Tamil';
      font-size: 4vw;
      line-height: 72px;
      color: #EE401C;
      color: rgb(238, 64, 28);
      text-outline: #FF9244;
      text-outline: rgb(255, 146, 68);
    }

    .eersteletter {
      font-style: normal;
      list-style-type: none;
      font-family: 'Adobe Tamil';
      font-size: 4.1vw;
      line-height: 72px;
      color: #FF9244 !important;
      color: rgb(238, 64, 28);
      text-outline: #FF9244;
      text-outline: rgb(255, 146, 68);
    }

<div class="contact">
  <address>
  <ul>
   <li><a href="tel:0031648852"><span class="eersteletter">T</span> +31 6 488 52 11 6</a></li>
      <li><a href="mailto:contact@catobexxnchop.nl"> <span class="eersteletter">E</span> contact@catobenschop.nl</a></li>
     <li><img class="insta-logo" src="https://icon2.kisspng.com/20180705/zxg/kisspng-instagram-logo-computer-icons-insta-logo-5b3dd0b5e4d3c3.9738753215307777819373.jpg" alt="insta logo"><a href="https://www.instagram.com/catobenscjsjshop/" target="_blank">catobenschop</a></li>
    </ul>
  </address>
</div>

如何在我的地址栏中对齐文本和内联图像

How to align text and inline image within my adress bar

css

text-alignment