时间戳

首页 > 解决方案 > 我无法居中引导 svg 图标

php - 我无法居中引导 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

标签： phphtmlcsslaravel-bladebootstrap-5

解决方案

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

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

推荐阅读