CSS Styling both img and paragraph child elements

Question

I'm having issues with my 2 child elements both being affected from styles applied to each other. I'm just trying to line up the one with the other better vertically.

I pretty much just went to move the img down a few pixels to line up with the

content. Any css thing I'm missing here?

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

`vertical-align: middle` on your `display: inline-block` elements will center them vertically with each other. `position: relative` and `top: +/- (number)px` will also let you move an element without affecting the page flow. — Liftoff, Jan 04 '21 at 22:51

score 0 · Accepted Answer · answered Jan 04 '21 at 22:54

Add vertical-align: middle to your image (and forget about </img> closing tag)

  .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>

Thank you! Very helpful. Worked great – Jan 04 '21 at 22:59 — , Jan 04 '21 at 22:59

CSS Styling both img and paragraph child elements

1 Answers1