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

Чтобы разместить фотографию с текстом по центру, вам понадобится использовать элементы HTML и CSS.

Вот пример кода HTML:

<div class="container">
  <img src="путь_к_фото.jpg" alt="Фото">
  <div class="text">
    <p>Ваш текст здесь</p>
  </div>
</div>

В коде выше мы создали блок-контейнер с классом "container", в котором содержатся картинка и блок с текстом.

Теперь добавим стили CSS, чтобы отцентрировать фотографию и текст:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.container img {
  width: 300px; /*задайте нужную ширину*/
  height: auto; /*автоматически подстроится по высоте*/
}

.container .text {
  margin-top: 20px; /*задайте нужное значение*/
}

В CSS мы задали стили для класса "container", который является блоком-контейнером. Здесь мы используем свойства display: flex;, align-items: center; и justify-content: center; для центрирования содержимого по вертикали и горизонтали. Свойство flex-direction: column; указывает, что элементы (фото и текст) должны быть выравнены вертикально. А свойство text-align: center; центрирует текст внутри блока.

Для фотографии мы установили ширину в 300px (вы можете задать нужное значение) и автоматический рассчет высоты при помощи height: auto;.

Для блока с текстом мы добавили margin-top для создания промежутка между фотографией и текстом. Вы можете указать нужное значение.

Таким образом, фотография и текст будут отображены по центру внутри блока-контейнера. Вы можете изменять размеры и стили элементов, чтобы соответствовать вашим требованиям.