Как я могу выровнять свой текст по центру с элементом SVG?

ProgramBox

Как я могу выровнять свой текст по центру с элементом SVG?

Post author:admin
Запись опубликована:22 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я хочу центрировать свой текст, который находится под моим элементом SVG, я прикрепил изображение к этому сообщению, поэтому вы сможете понять, что. Я новичок в Bootstrap, CSS и HTML, поэтому это то, что я пробовал до сих пор:

 <div class="div1">
<div>
            <h3>
  Manager Success Center
  </h3>
   </div>
<div class="container">
        <div class="row div2">
                        <div class="col-md-3 col-xs-6">
                    amp;emsp;<a><svg width="3.5em" height="3.5em" viewBox="0 0 16 16" class="bi bi-file-earmark-ruled" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M5 10H3V9h10v1H6v2h7v1H6v2H5v-2H3v-1h2v-2z"/>
                <path d="M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/>
                <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z"/>
              </svg>
          <br>
              <h4>Hiring for Quality</h4>
              <p>Resources for Hiring</p></a>
              
      </div>
                        <div class="col-md-3 col-xs-6">
                        amp;emsp;amp;emsp;<a><svg width="3.5em" height="3.5em" viewBox="0 0 16 16" class="bi bi-building" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"/>
  <path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"/>
</svg>          
      
      <br>
              <h4>Onboarding amp;amp; Ramp-Up</h4>
              <p>Getting Ready for Day 1 amp;amp; Beyond</p></a>
      
      </div>
                        <div class="col-md-3 col-xs-6">
                        amp;emsp;<a><svg width="3.5em" height="3.5em" viewBox="0 0 16 16" class="bi bi-cpu" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</svg>
              <br>
              <h4>Manage Team amp;amp; Work</h4>
              <p>Performance amp;amp; HR Resources</p></a>
      </div>
                        <div class="col-md-3 col-xs-6">
                        amp;emsp;<a><svg width="3.5em" height="3.5em" viewBox="0 0 16 16" class="bi bi-person-badge-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm4.5 0a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm5 2.755C12.146 12.825 10.623 12 8 12s-4.146.826-5 1.755V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-.245z"/>
</svg>          
      <br>
              <h4>Grow Team amp;amp; self</h4>
              <p>Career Development</p></a>
      </div>
            </div>
</div>
</div>

Вот как отображается текст:

Ответ №1:

Правильным инструментом HTML для этого является figure элемент — имеет элемент отображения (обычно изображение, но это может быть что угодно, включая svg) и figcaption , который обычно является первым или последним дочерним элементом элемента hte figure . Рисунок используется для сопоставления визуальных элементов с описаниями или связанным текстом, и все части могут быть стилизованы. В этом случае — это так же просто, как применить text-align: center к элементу figutre, чтобы получить нужный вам стиль.

Обратите внимание, что я следую вашей структуре кода, в которой элемент a переносит все остальное содержимое, но я бы, вероятно, не делал этого таким образом, если бы я это делал. В свое время вы не могли бы использовать a вокруг других подобных элементов, но HTML 5 позволяет встроенным элементам уровня обтекать элементы уровня блока — так что это нормально — но вам, вероятно, потребуется стилизовать содержимое, чтобы убрать подчеркивания при наведении курсора и т. Д.

Кроме того, элементы h4 и p будут иметь стиль на них — поля / отступы, которые вы, возможно, захотите изменить и настроить, — но это показывает эффект, который вы ищете.

Также — обратите внимание, что в маленьком окне фрагмента — значки расположены в два ряда по два — это связано с классами boodtstrap xs-6, которые у вас есть — если вы хотите видеть их в одном ряду — используйте кнопку «просмотр в полноэкранном режиме» в окне фрагмента.

 figure {
  text-align: center;
  padding: 16px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="div1">
  <h3> Manager Success Center</h3>
  <div class="container">
     <div class="row div2">
      <div class="col-md-3 col-xs-6">
        <a>
        <figure>
             <svg width="3.5em" height="3.5em" viewBox="0 0 16 16" class="bi bi-file-earmark-ruled" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5 10H3V9h10v1H6v2h7v1H6v2H5v-2H3v-1h2v-2z"/>
            <path d="M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/>
            <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z"/>
          </svg>
          <figcaption>
           <h4>Hiring for Quality</h4>
            <p>Resources for Hiring</p>
          </figcaption>
         </figure>
       </a>
      </div>
      <div class="col-md-3 col-xs-6">
        <a>
          <figure>
            <svg width="3.5em" height="3.5em" viewBox="0 0 16 16" class="bi bi-building" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"/>
            <path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"/>
          </svg>          
            <figcaption>
              <h4>Onboarding amp;amp; Ramp-Up</h4>
              <p>Getting Ready for Day 1 amp;amp; Beyond</p>
            </figcaption>
          </figure>
        </a>
      </div>
      <div class="col-md-3 col-xs-6">
        <a>
          <figure>
            <svg width="3.5em" height="3.5em" viewBox="0 0 16 16" class="bi bi-cpu" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
            </svg>
            </figcaption>
              <h4>Manage Team amp;amp; Work</h4>
              <p>Performance amp;amp; HR Resources</p>
            </figcaption>
          </figure>
        </a>
      </div>
      <div class="col-md-3 col-xs-6">
        <a>
          <figure>
            <svg width="3.5em" height="3.5em" viewBox="0 0 16 16" class="bi bi-person-badge-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm4.5 0a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm5 2.755C12.146 12.825 10.623 12 8 12s-4.146.826-5 1.755V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-.245z"/>
            </svg>          
          <figcaption>
            <h4>Grow Team amp;amp; self</h4>
            <p>Career Development</p>
          </figcaption>
         </figure>
        </a>
      </div>
    </div>
  </div>
</div>

Развернуть фрагмент

Метки: Как я могу выровнять свой текст по центру с элементом SVG?

Вопрос:

Ответ №1:

Вам также может понравиться

Spring Kafka мертвая очередь сообщений и повторные попытки

Почему pgAdmin не может использовать предложение set?

Ошибка страницы ASP — 0x80004005 при попытке получить запрос («переменная»)