基于Bootstrap的HTML页面图片对齐调整求助

可以通过Bootstrap内置布局类实现图片的居中与微调偏移，无需自定义CSS，具体修改如下：

调整要点 #

• 给包裹图片和标题的<div>加上align-items-center类，让图片与文字垂直居中对齐
• 给图片添加position-relative、top-1、start-1类，通过相对定位实现向下、向左的微调偏移（top-1对应向下偏移0.25rem，start-1对应向左偏移0.25rem，可根据需求换成top-2/start-2等更大偏移量）
• 调整图片的margin类，把原mx-2改为ms-1 me-2，优化左侧间距，强化向左偏移的效果

修改后的完整代码 #

<ul>
    <li>
        <a href="https://example.com" class="dropdown-header">
            <strong>Example</strong><br />
            <span class="megasubheader">| NEWS AND CONTENT </span>
        </a>
    </li>
    <li class="dropdown-divider"></li>
    <li class="list-group">
        <a href="https://example.com" class="list-group-item mt-2" aria-current="true">
            <div class="d-flex w-100 justify-content-between align-items-center">
                <img id="imgsrc1" width="75px" height="75px" class="rounded position-relative top-1 start-1 ms-1 me-2">
                <span id="Htitle1" style="font-size: 14px"></span>
            </div>
        </a>
        <a href="https://example.com" class="list-group-item mt-2" aria-current="true">
            <div class="d-flex w-100 justify-content-between align-items-center">
                <img id="imgsrc2" width="75px" height="75px" class="rounded position-relative top-1 start-1 ms-1 me-2">
                <span id="Htitle2" style="font-size: 14px"></span>
            </div>
        </a>
        <a href="https://example.com" class="list-group-item mt-2" aria-current="true">
            <div class="d-flex w-100 justify-content-between align-items-center">
                <img id="imgsrc3" width="75px" height="75px" class="rounded position-relative top-1 start-1 ms-1 me-2">
                <span id="Htitle3" style="font-size: 14px"></span>
            </div>
        </a>
    </li>
</ul>

如果需要更细微的偏移，也可以用top-0/start-0搭配mt-1/ms-1这类margin类组合调整，灵活度更高。

内容的提问来源于stack exchange，提问作者nick