无法使我的图像居中答案

【问题标题】：Trouble making my image centered无法使我的图像居中
【发布时间】：2018-04-03 12:43:30
【问题描述】：

我无法让第一张图片居中。它在右侧延伸，但左侧似乎仍然有那种填充。我将引导程序的布局文件中的填充更改为 0 但无济于事。我错过了一些非常简单的东西吗？我认为容器流体允许使图像全宽。包括截图。

编辑：我正在使用带有引导程序的 ASP.net mvc。

    @{
    ViewBag.Title = "Digital Systems Malaysia";
}


<a id="Home"></a>
<div class="jumbotron">
    <h1>Digital Systems Malaysia</h1>

</div>


<div class="container-fluid" style="width:100%; height: 100%; padding: 0 !important; margin: 0;";>

        <img src="/Content/Images/background3.jpg";>
</div>

screenshot

编辑重要提示

如果其他人遇到此问题，请注意这是由于 MVC 结构造成的。 @RenderBody 部分包含在 .body-content 类的特殊 div 中

body-content 类将自动为您的整个页面设置一个边距，并且不能在页面本身中被覆盖。因此，如果要删除边距，则必须编辑类或使用绝对定位来放置某些内容，而不考虑 .body-content 边距。

【问题讨论】：

请创建一个具有相同问题的 jsfiddle。
见Centering Things和Centering in CSS: A Complete Guide和How to Center in CSS。

标签： jquery html css asp.net-mvc bootstrap-4

【解决方案1】：

尝试添加

text-align:center;

图片的父级div的属性

【讨论】：

还是一样 =( 这让我很困扰。我只想让图像像标题一样跨越屏幕

【解决方案2】：

也许你可以尝试把 `

<div class="center">
<div class="container-fluid" style="width:100%; height: 100%; padding: 0 !important; margin: 0;";>

        <img src="/Content/Images/background3.jpg";>
</div>
</div>

'

或

'

<div class="container-fluid" style="width:100%; height: 100%; padding: 0 !important; margin: 0;";>
<center>
        <img src="/Content/Images/background3.jpg";>
</center>
</div>

'

或

您可以在 css 文件中编辑 container-fluid

【讨论】：

前 2 个没有任何改变。您会对 css 中的 container-fluid 进行哪些更改？目前是 .container-fluid { margin-right: auto;左边距：自动；填充左：0px； padding-right: 0px; }
你能不能尝试在这些 .container-fluid { margin-right: auto; 上设置任何值？左边距：自动；填充左：0px； padding-right: 0px;}?
delete auto an 0px value..just put any value to see if it is changed your interface or not.试试吧
似乎并非如此。我试过500px。图像没有任何反应。然后是 100 像素。还是一样。 :/ 我的图片尺寸是 1920x 890

【解决方案3】：

看起来图像本身溢出了您还应该给img 一个样式来限制宽度，否则它将显示为全尺寸。

img { width:100%; height: auto; }

【讨论】：

我实际上希望它是全宽的。如，它覆盖了整个屏幕宽度。但现在，它向右延伸，同时在左侧留下一个空白。

【解决方案4】：

您还可以将 bootstrap 类 text-center 添加到您的 div 中，使用类 container-fluid

<div class="container-fluid text-center" style="width:100%; height: 100%; padding: 0 !important; margin: 0;";>

    <img src="/Content/Images/background3.jpg";>
</div>

【讨论】：

图片还是一样的：/
所以，如果我没有误会，您希望将这张图片作为您的 div 类的背景，对吗？您可以尝试使用带有图像路径的背景属性
您是指将这个“背景图像：url（/Content/Images/background3.jpg）;”添加到.container-fluid？
背景图片：url('../Content/Images/background3.jpg');这是正确的语法吗？

【解决方案5】：

好吧，我通过将style=" margin-left:-385px; 添加到图像本身来让它工作。

然而，我认为应该有更好的方法来做到这一点......但如果有人和我有同样的问题，这是一个对我有用的修复。

【讨论】：