HTML

Question

好吧，这是一个小时的谷歌搜索，在这一点上，我可能会过度思考它。

HTML

<body>
    <div class="#wrapper">
         <div class="container-fluid">
        <img src="background-image.jpeg" alt="">
    </div>
</div>

CSS

img {
background-position: center center;
}

以上所有代码都将img放在左上角。

我也试过，修复，静态，相对，绝对的img标签，它什么都没改变。

我是否通过在CSS中使用img来定位错误的位置？

Answer 1

现在你在CSS中定位背景图片，这也应该在CSS中定义，但你使用的是IMG标签。

<style>
div.container-fluid: { 
  background-image: url('background-image.jpeg');   
  background-position: center;
}
</style>

<div class="container-fluid">
Your text here
</div>

Answer 2

首先，为什么不将图像定义为CSS中的背景而不是使用img标签？您还有一些语法嵌套错误，请小心合适地关闭标记。

HTML

httpd

CSS

<body>
    <div class="wrapper">
        <div class="container-fluid">
        </div>
    </div>
</body>

确保相对于CSS文件的图像路径正确

Answer 3

尝试使用使用text-align: center;的元素包装它。例如：

HTML

<div class="center-me">
    <img src="background-image.jpeg" alt="" />
</div>

CSS

.center-me {
    text-align: center;
}

或者您可以将text-align: center;添加到container-fluid，但这可能会影响该容器中的其他内容：

.container-fluid {
    text-align: center;
}

以背景图像为中心，看起来比它应该更难

3 个答案:

HTML

CSS