遇到我的css问题

问题描述：

似乎可以移动图像，我需要并排显示图像和文本，但是我希望能够将图像移动一点点以便中间部分或图像与文本排列在一起。现在它是底部，无论我做什么，或不会上下移动，这里是div中的HTML，然后CSS遇到我的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; 
}

可能重复http://stackoverflow.com/questions/9201756/how-to-put-img-inline-with-text – chazsolo

你可以尝试把图像作为背景，或者如果失败，你可以使其绝对位置，并添加填充 - 左div – pol

图像和文本已经内联，但图片的底部与文本的底部内联，我想知道如何只向上移动图像或以便图像与文本仍然内嵌，但看起来像在中间，如果有意义 – TheHiddenPerson

答

从我的理解，你有一个图像和文字并排，但图像比它应该低。你可以做的是将padding-bottom添加到图像CSS来改变它的位置。你想要移动多少像素取决于你想要图像走多远。

基本上做：

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

我想降低图像但将文本保持在相同的位置，已经尝试过，并且它只是将文本向下移动而不是图像，可以与我如何在html中写入它？ – TheHiddenPerson

可能..我会将文本包装在一个p标签或其他东西，以便我可以稍微分离它的父类。问题是，图像和文本都共享相同的父类，所以这将是问题的原因之一。 – Nedaaa

答

相信经过一些挖我得到了它，只需要添加的位置是：相对的; 添加到.logoimage css

答

添加vertical-align：middle;您logoimage类：

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

相关推荐