垂直居中的文本一直在图标下方

Question

我正在尝试为我的项目发出警报，它看起来不错，但是当我将其设为移动页面时，文本位于图标下方。我希望它与图标保持对齐。

HTML:

<div class="rds-alert">
    <img class="rds-alert-icon"/>
    <div class="rds-alert-message">
        <span class="rds-alert-so">Congratulation</span> Your submission has been approved.
    </div>    
</div>

CSS:

.rds-alert-so{
    font-size:30px;
}
.rds-alert-icon{
    width:70px;
    height:70px;
    vertical-align:middle;
    margin-right:12px;
}
.rds-alert-message{
    display:inline;
}

Jsfiddle：http://jsfiddle.net/0f2rpvc8/

Answer 1

这是一种方法：

.rds-alert-so {
    font-size:30px;
}
.rds-alert-icon {
    width:70px;
    height:70px;
    margin-right:12px;
    display:table-cell;
}
.rds-alert-message {
    display:table-cell;
    vertical-align:middle;
}
.rds-alert {
    display:table-row;
}

<div class="rds-alert">
    <img class="rds-alert-icon" />
    <div class="rds-alert-message"> <span class="rds-alert-so">Congratulation</span> Your submission has been approved.</div>
</div>

Answer 2

或

.rds-alert-icon {
float: left;
}

http://jsfiddle.net/2Lfkrxup/

垂直居中的文本一直在图标下方

Vertically centered text keeps going under icon

html

css