Question

我有一个问题，我不想添加图像和垂直中心对齐图像。这看起来像这样 Link

我不希望看起来像这样： Link

我的代码：

<style>
  * {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  }

  .img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  p {
    display: inline-block;
  }
</style>

<img src="./image.jpg" class="img"> <p>Test</p>

我试过这个，但有没有更好的方法来解决这个问题？

p {
    display: inline-block;
    margin-bottom: -1.76em;
  }

Answer 1

在.img类中添加vertical-align:middle;，它应该可以解决问题。

  * {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  }

  .img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    vertical-align:middle;
  }

  p {
    display: inline-block;
  }

<img src="./image.jpg" class="img"> <p>Test</p>

垂直居中文本与图像

1 个答案: