html - 在文本上居中多个图像

Question

我在尝试使图像以某些文本为中心时遇到了一些困难，如下所示：

我已经使用表格进行了一些尝试，但无法让图像保持居中。

Answer 1

将图像的显示属性设置为 block / inline-block 允许您像使用普通对象一样使用它，以便您可以设置边距或填充。如果你想居中，你可以使用display: block; margin: 0 auto;

Answer 2

<div id="bannerinfo" style="color: white; width: 100%; height: 40px; background-color:#9fd2cd; text-align:center; line-height:40px;">
                       <p>Sale Now On - Click here to find out more</p></a>
</div>

试试这个

Answer 3

我在这里做了一个 JSFIDDLE 示例：Demo

您可以在背景上使用填充，以便文本始终位于中心。还可以设置display: block;左右inline-block;使用margins, padding它。

<div class="wrapper">
    <div class="color">
        <h1>Some big text</h1>
        <p>Some small text</p>
    </div>
</div>

.color{
    // background-color: red; <-- used in the jsfiddle
    background-image: url('yourimage.jpg');
    display: inline-block;
    text-align: center;
    padding: 40px;
    color: #fff;
}

h1{
    font-size: 80px
}