Question

如果图像不以浮动为中心，我可以轻松地将图像居中放在文本的左侧。

图片＆amp;内嵌左侧文字： https://jsfiddle.net/gc19qqqp/3/

然而，text-align: center我不知道该怎么做。

我怎样才能使图像看起来与第一个小提琴中的图像类似，但文本/图像居中？（text-align: center）

需要图片＆amp;要在中心内嵌的文字： https://jsfiddle.net/cL55pzLa/

应如下所示：

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

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

您可以将内容包装在设置了div和display:inline-block的新vertical-align: middle元素中。

（Demo）

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

如何在div的中心并排显示图像？

3 个答案: