CSS 为 img 和 paragraph 子元素设置样式

Question

我的 2 个子元素都受到相互应用的样式的影响，我遇到了问题。我只是想把一个和另一个更好地垂直排列起来。

我几乎只是将 img 向下移动了几个像素以与

内容对齐。我在这里遗漏了什么 css 东西吗？

  <div id='fileIcon' class='fileIcon'>
    <img src='images/Google-Chrome-Logo.svg' class="iconImg"></img>
    <p id='fileName'>TestingFileName.pdf</p>
  </div>


  
  .fileIcon {
    text-align: center;
    overflow: auto;
  }

  .iconImg {
    display: inline-block;
    z-index: 1;
    width: 22px;
    height: 22px;
    padding: 0px 5px;
  }
  
  #fileName {
    display: inline-block;
    z-index: 1;
    color: #999;
    font-size: 1.1em;
    margin: 0;
  }

Answer 1

将 vertical-align: middle 添加到您的图像（忘记 </img> 结束标记）

  .fileIcon {
    text-align: center;
    overflow: auto;
  }

  .iconImg {
    display: inline-block;
    z-index: 1;
    width: 22px;
    height: 22px;
    padding: 0px 5px;
    vertical-align: middle;
  }
  
  #fileName {
    display: inline-block;
    z-index: 1;
    color: #999;
    font-size: 1.1em;
    margin: 0;
  }

 <div id='fileIcon' class='fileIcon'>
    <img src='' class="iconImg">
    <p id='fileName'>TestingFileName.pdf</p>
  </div>

CSS 为 img 和 paragraph 子元素设置样式

CSS Styling both img and paragraph child elements

css

margin