Как сделать также фото с текстом по центру?
<section class="slider"> <div class="slider__div"> <div class="slider__section" style="background-image: url(Images/1вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title"></h2> <p class="slider__text"></p> </div> </div> </div> <div class="slider__section" style="background-image: url(Images/2вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title"></h2> <p class="slider__text"></p> </div> </div> </div> <div class="slider__section" style="background-image: url(Images/3вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title"></h2> <p class="slider__text"></p> </div> </div> </div> </div> </section> |
<section class="slider"> <div class="slider__div"> <div class="slider__section" style="background-image: url(Images/1вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title"></h2> <p class="slider__text"></p> </div> </div> </div> <div class="slider__section" style="background-image: url(Images/2вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title"></h2> <p class="slider__text"></p> </div> </div> </div> <div class="slider__section" style="background-image: url(Images/3вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title"></h2> <p class="slider__text"></p> </div> </div> </div> </div> </section>
.slider__section { height: 635px; height: 460px; position: relative; display: flex; justify-content: space-between; text-align: center; } |
.slider__section { height: 635px; height: 460px; position: relative; display: flex; justify-content: space-between; text-align: center; }
Дополнительно:
Ответы:
align-items: center;
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы создать фото с текстом по центру, вы можете использовать стили CSS для центрирования текста и изображения. Вот пример кода на HTML и CSS, который поможет вам достичь желаемого результата:
```html
.container {
position: relative;
text-align: center;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
```
В данном примере у нас есть контейнер `.container`, в котором находится изображение `![]()
` и текст `
Вы можете заменить `your_photo.jpg` на ссылку на ваше изображение и `Your Text Here` на любой текст, который вы хотите разместить на изображении. Таким образом, вы создадите эффект фото с текстом по центру.