我的CSS有麻烦

Question

Can seem to be able to move the image around, I need the image and the text side-by-side and it is, but I would like to be able to move the image done just a little bit so that the middle part or the image is lined up with the text. Right now it is the bottom and no matter what I do it wont move up or down, here is the html for the div and then the css

  <div class="img">
    <img src="/image/file/location">
    <div class="imgwording">
        <img src="/image/file/location" class="logoimage">
        Test Text
    </div>
    <div class="sub">
        <img src="/image/file/location" class="mail">
        Test Text
    </div>
    <div class="imagelinks1">
        Training &amp;</br>Events
    </div>
    <div class="imagelinks2">
        Trauma &amp; Gender</br>Projects
    </div>
    <div class="imagelinks3">
        Behavioral Health</br>Resources
    </div>
</div>

CSS:

  .imgwording { 
   text-decoration: none !important;
   line-height: 1.28; 
   letter-spacing: 1.5px; 
   text-align: center; 
   font-size: 48px;
   padding: 0px 60px !important;
   position: absolute; 
   top: 65px;
   width: 100%;
   font-family: eb garamond,serif;
   color: #fff;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-direction:column;
   left: -110px;
   display: inline-block;

 }

 .logoimage {
    width: 50px;
    height: 100px;
 }

Answer 1

From what I understand, you have an image and text side by side but the image is lower than it should be. What you could do is add padding-bottom to the image CSS to change its position. How many pixels you would want to move would depends on how much higher you want the image to go.

Basically doing:

.logoimage {
   width: 50px;
   height: 100px;
   padding-bottom: 5px; /* this could be any value depending */
}

Answer 2

Believe after some digging I got it, just need to add position: relative; to the .logoimage css

Answer 3

Add vertical-align:middle; to your logoimage class:

.logoimage {
    width: 50px;
    height: 100px;
    vertical-align:middle;
 }