html - 如何在 div 的中心并排显示图像和文本？

Question

如果图像没有以 float 居中，我可以轻松地将图像居中放置在文本的左侧。

左侧内联的图像和文本: https://jsfiddle.net/gc19qqqp/3/

但是，对于 text-align: center 我不知道该怎么做。

我怎样才能使图像看起来与第一个 fiddle 中的图像相似，但文本/图像居中？ (text-align: center)

需要将图像和文本内联在此处的中心: https://jsfiddle.net/cL55pzLa/

应如下所示:

/* recall alert styling */
#recall-alert {
    background-color: #fefab1;
    color: #d10101;
    text-align: center;

    padding: 15px 0;
    margin: 5px 0;

    font-size: 15px;
    font-weight: bold;

}
#recall-alert img {
    height: 40px;
    margin-right: 5px;

}

#recall-alert a {
    color: #98bcb0;
    font-style: italic;
}
#recall-alert a:visited {
    color: #98bcb0;
    outline: none;
}

<div id="recall-alert" class="">
    <img src="http://www.hospitalsafetyscore.org/media/image/hss-alert-icon.png" />
    <span>
        Recall from chicken of the sea effective July 2015<br />
        <a href="#">Click to Read More</a>
    </span>
</div>

Answer 1

我想这可能对你有帮助:

DEMO

您的HTML

没有变化

CSS

/* recall alert styling */

#recall-alert {
    display:block; /*Added*/
    text-align:center;  /*Added*/ 

    background-color: #fefab1;
    color: #d10101;
    /*text-align: left; REMOVED */

    padding: 15px 0;
    margin: 5px 0;

    font-size: 15px;
    font-weight: bold;

}
#recall-alert img {
    display:inline-block;  /*Added*/ 
    height: 40px;
    margin-right: 5px;
    /*float: left; REMOVED */
}
 /*Added span selector */
#recall-alert span {  
    display:inline-block;    
}

#recall-alert a {
    color: #98bcb0;