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;并使用H3删除margin: 0;边距。

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

Answer 2

我会将包装器切换为显示为表格，然后在表格单元格中间垂直对齐。

.socialMedia{
    display: table;
}
.socialMedia a {
    display: table-cell;
    vertical-align: middle;
}
.socialMedia h3 {
    display: table-cell;
    vertical-align: middle;
}

工作示例：jsFiddle