Question

如何获取下面html中的图像以使其左对齐，使其与标题文本的左边缘和其下方的文本的左边缘匹配？当我运行此图像时，图像会缩进几个像素，这不会使其看起来与标题或下方的文本对齐。图像只有128像素宽。预先感谢。

    <div class="row">
        <div class="col-sm-4">
            <p>
                <h3>Technical Diagrams</h3><br />
                <a class="nav-link" href="~/Graphics/TechnicalDiagrams">
                    <img  class=".img-fluid" border="0" alt="Technical Design Documents" src="~/Content/Images/Technical/An N-Tier Architecture Example Using Visual Studio (2016-01-12)(370Thumb).jpg">
                </a><br />
                This is a collection of images which were used in the past to communicate process or software workflows and architecture.
            </p>
        </div>
    </div>

Answer 1

您的解决方案是将填充类之一添加到超链接，例如“ p-0”以完全删除填充。您应从图像“ img-fluid”类中删除点。另外，您的HTML代码违反了段落中允许的元素列表，请搜索“短语内容”。

Answer 2

解决方案是向img标签周围的div容器添加零填充和边距设置。还可以删除.img-fluid类名前面的句点。这是使用Bootstrap的ASP.NET MVC 5页面的摘要。在Visual Studio的此类页面中，使用代字号来引用根目录。

<div class="row">
    <div class="col-sm-4">
        <p>
            <h3>Technical Diagrams</h3><br />
            <a class="nav-link" style="padding:0; margin:0;" href="~/Graphics/TechnicalDiagrams">
                <img  class="img-fluid" border="0" alt="Technical Design Documents" src="~/Content/Images/Technical/An N-Tier Architecture Example Using Visual Studio (2016-01-12)(370Thumb).jpg">
            </a><br />
            This is a collection of images which were used in the past to communicate process or software workflows and architecture.
        </p>
    </div>
</div>

我如何使图像上方的文字标题和下方的文字左对齐

2 个答案: