html - CSS 无法控制文本对齐方式，因为整个 div 似乎都在移动

Question

如何将文本移动到图像的中心以使其很好地对齐，因为目前它根本没有对齐，它只是位于最底部。它需要为 mozilla 工作

`<div class="socialMedia">
            <h3>Let's be friends:</h3>
            <a href="#"><img src="images/fb.png" alt="simple gym facebook"></a>
            <a href="#"><img src="images/email.png" alt="simple gym facebook"></a>
            <a href="#"><img src="images/youtube.png" alt="simple gym facebook"></a>
    </div>`

.socialMedia{
    -moz-box-orient:horizontal;
    -moz-box-flex:1;

    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-flex:1;

    display:-ms-box;
    -ms-box-orient:horizontal;
    -ms-box-flex:1;
    float:right;

}
.socialMedia img{
    padding-right:5px;
}
.socialMedia img:last-child{
    padding-right:0px;
}
.socialMedia h3 {
    font-size:14px;
    font-family:Times, Arial,serif;
    font-weight:normal;
    color:#b6b5b5;
    padding-bottom:5px;
    padding-right:10px;
    display:-moz-box;
}

Answer 1

如果您将使用固定高度，则使用 1ine-height 是一个选项。我唯一改变的是 H3 添加 line-height: 25px; 并使用 margin: 0 去掉 H3 边距;。

HTML:

<div class="socialMedia">
     <h3>Let's be friends:</h3>
 <a href="#"><img src="images/fb.png" alt="simple gym facebook" /></a>
 <a href="#"><img src="images/email.png" alt="simple gym facebook" /></a>
 <a href="#"><img src="images/youtube.png" alt="simple gym facebook" /></a>

</div>

CSS:

.socialMedia {
    -moz-box-orient:horizontal;
    -moz-box-flex:1;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-flex:1;
    display:-ms-box;
    -ms-box-orient:horizontal;
    -ms-box-flex:1;
    float:right;
}
.socialMedia img {
    padding-right:5px;
}
.socialMedia img:last-child {
    padding-right:0px;
}
.socialMedia h3 {
    font-size:14px;
    font-family:Times, Arial, serif;
    font-weight:normal;
    color:#b6b5b5;
    margin:0;
    line-height: 25px;
}

DEMO HERE