如何在div中心與文本並排顯示圖像？

Question

如果圖像不以浮點居中，則可以輕松地使圖像居中於文本的左側。

左側的圖片和文字內聯： https ： //jsfiddle.net/gc19qqqp/3/

但是，使用text-align: center我不知道該怎么做。

如何使圖像看起來與我在第一小提琴中獲得的圖像相似，但文本/圖像居中？ （ 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;

Answer 2

您可以使用display:inline-block和vertical-align: middle set將內容包裝在新的div元素vertical-align: middle 。

（ 演示 ）

<div id="recall-alert" class="">
    <div class="alert-inner">
        <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>
</div>

#recall-alert .alert-inner {
    display: inline-block;
    vertical-align: middle;
}

Answer 3

試試這個： https : //jsfiddle.net/8pam3nqh/2/

我更改的樣式：

#recall-alert {
    text-align: center;  /* Changed from 'left' */
}
#recall-alert img {
   /* float: left;*/
   vertical-align: top; /* Added */
}
/* Added */
#recall-alert div {
   display: inline-block;
}

我將您的內部<span>更改為<div>但是您可以選擇不選擇。 在這種情況下，您可以更改上面的最后一個樣式以使選擇器#recall-alert span 。