我无法居中引导 svg 图标



我希望svg图标居中,但我看到它们向右移动。如果你能帮忙,我会非常感激。这是一个截图

我welcome.blade.php

@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" style="text-align: center;">Головна сторінка</h1>
<p class="lead text-muted" style="text-align: 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"  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 style="text-align: center;">Бізнес</h2>
<p style="text-align: 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" 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 style="text-align: center;">Користувачі</h2>
<p style="text-align: center;">Таблиця з користувачами.</p>
<p><a  class="btn btn-outline-warning" href="/users">Перейти на сторінку »</a></p>
</div>
</div>
</div>
</div>
@endsection

首先将每个svg放入div中,然后在该div中添加以下类:

<div class='d-flex justify-content-center'> <svg>{Your Svg Icon}</svg> </div>

最新更新