将多个图像居中放在文本上

Question

我尝试将图像置于某些文本中心时遇到了一些困难，如下所示：

我尝试使用表格，但无法让图像保持居中。

Answer 1

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

Answer 2

我在这里制作了一个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
}

Answer 3

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

尝试这个