Bootstrap SVG图标无法居中且偏移至右侧的问题求助

嘿，我知道你现在被SVG图标偏右的问题困扰了，别担心，咱们几步就能搞定它！你的问题主要是SVG没有被正确设置为块级元素并添加居中样式，或者自带的属性影响了对齐，下面给你具体的修复方案：

方案一：用Bootstrap内置类快速居中 #

Bootstrap有现成的工具类，直接给SVG加上就能实现水平居中，这也是最符合Bootstrap规范的做法：

修改后的完整代码 #

@extends('layouts.layout')
@section('title')Головна сторінка@endsection
@section ('main_content')
<div class="row py-lg-5 ">
  <div class="col-lg-6 col-md-8 mx-auto">
    <h1 class="fw-light text-center">Головна сторінка</h1>
    <p class="lead text-muted text-center">Вітаємо на головній сторінці сайту.</p>
    <hr class="my-4" style="height:2px;border-width:0;color:orange;background-color:orange">
    <div class="row">
      <div class="col-lg-4">
        <svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" width="125" height="130" fill="currentColor" focusable="false" class="bi bi-briefcase d-block mx-auto" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
          <path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z"/>
        </svg>
        <h2 class="text-center">Бізнес</h2>
        <p class="text-center">Таблиця з бізнесами.</p>
        <p><a class="btn btn-outline-warning" href="/business">Перейти на сторінку »</a></p>
      </div>
      <div class="col px-md-5"></div>
      <div class="col-lg-4">
        <svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" width="125" height="130" fill="currentColor" focusable="false" class="bi bi-person-circle d-block mx-auto" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
          <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
          <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
        </svg>
        <h2 class="text-center">Користувачі</h2>
        <p class="text-center">Таблиця з користувачами.</p>
        <p><a class="btn btn-outline-warning" href="/users">Перейти на сторінку »</a></p>
      </div>
    </div>
  </div>
</div>
@endsection

关键修改说明 #

• 给两个SVG都添加了d-block mx-auto类：
  • d-block：把SVG从行内元素转为块级元素，这样margin:auto才能生效（行内元素无法用margin实现居中）
  • mx-auto：自动设置左右margin为auto，实现水平居中
• 顺便把你原来的style="text-align: center;"替换成了Bootstrap的text-center类，既简洁又符合框架使用习惯

方案二：调整SVG的preserveAspectRatio属性（备用） #

如果上面的方法没生效，你可以检查SVG的preserveAspectRatio属性，你当前设置的xMinYMid会让SVG靠左对齐，把它改成xMidYMid，就能让SVG在容器内居中对齐：

preserveAspectRatio="xMidYMid"

这样修改后，你的图标应该就能乖乖居中啦！

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