Блог

Вот мой HTML-код для изображения.

 .image1
{
  display: block;
  margin-left: auto;
  margin-right: auto;
} 

 <figure>
  <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="T-shirt colors" class="image1">
  <figcaption>Choose from are variety of t-shirt colors</figcaption>
</figure> 

Как мне расположить текст по центру под изображением?

в будущем вы, возможно, захотите добавить немного кода.ио для нас, чтобы поиграть с ним. мы не знаем, как выглядит ваш родительский ящик или css вашего родительского ящика.

возможно, вы захотите проверить это

http://howtocenterincss.com/

я думаю, что это очень полезный инструмент для обмана

Вы можете выровнять текст по центру figcaption как

 figcaption{
    text-align: center;
}
 

 .image1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figcaption {
  text-align: center;
} 

 <figure>
  <img src="https://picsum.photos/200/300" alt="T-shirt colors" class="image1">
  <figcaption>Choose from are variety of t-shirt colors</figcaption>
</figure> 

Этого можно достичь text-align , установив свойство figcaption center таким образом:

 figcaption {
    text-align: center;
}
 

Вы можете попробовать добавить text-align: center; в свой тег figcaption.