Question

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

编辑：我正在使用ASP.net mvc和bootstrap。

    @{
    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边距。

Answer 1

尝试添加

text-align:center;

图像的父级div的属性

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

＆＃39;

或

＆＃39;

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

＆＃39;

或

你可以编辑css文件中的容器流体

Answer 3

看起来图像本身溢出您还应该为img提供一种限制宽度的样式，否则它将以完整大小显示。

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

Answer 4

您还可以使用课程text-center

将 bootstrap 课程container-fluid添加到您的div

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

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

Answer 5

我通过将style=" margin-left:-385px;添加到图像本身来实现它。

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

无法使我的图像居中

5 个答案: