Как я могу выровнять изображение слева с текстом над ним и текстом под ним

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

Решением было добавить нулевые параметры заполнения и полей в контейнер div, окружающий тег img.Также для удаления точки перед именем класса .img-fluid.Это фрагмент страницы ASP.NET MVC 5 с использованием Bootstrap.Символ тильды используется на страницах этого типа в 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>

Answer 2

Ваше решение состояло бы в том, чтобы добавить один из классов заполнения к гиперссылке, например, "p-0", чтобы полностью удалить заполнение.Вы должны удалить точку из класса "img-Fluid" для вашего изображения.Также ваш HTML-код нарушает список разрешенных элементов в абзаце, ищите «Фразовое содержание».