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

以这种方式：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

或

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

http://jsfiddle.net/2Lfkrxup/

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

2 个答案: