Как расположить текст под картинкой?
(должно выглядеть как на скрине)
Не получается разместить текст под фоткой(текст сдвигается вправо, а фото влево)
HTML:
div class="photo-list" a href="" class="photo-item" div class="photo-item-hover" /div img src="" alt="." /a div class="text" текст /div /div> |
div class="photo-list" a href="" class="photo-item" div class="photo-item-hover" /div img src="" alt="." /a div class="text" текст /div /div>
CSS:
.photo-list{ position: relative; display: flex; flex-wrap: wrap; overflow: hidden; font-size: 0; margin: 0; align-items: center; } .photo-list img{ width: 200px; height: 180px; border: 1px solid black; display: block; margin: 0; } .photo-item{ display: block; flex: 25%; overflow: hidden; position: relative; } .text{ color: #333; font-weight: bold; margin-top: 60px; display: flex; background-attachment: fixed; border-radius: 5px; padding-left: 15px; text-align: left; padding: 10px; background-color: #fff; box-sizing: border-box; overflow: hidden; font-size: 18px; } |
.photo-list{ position: relative; display: flex; flex-wrap: wrap; overflow: hidden; font-size: 0; margin: 0; align-items: center; } .photo-list img{ width: 200px; height: 180px; border: 1px solid black; display: block; margin: 0; } .photo-item{ display: block; flex: 25%; overflow: hidden; position: relative; } .text{ color: #333; font-weight: bold; margin-top: 60px; display: flex; background-attachment: fixed; border-radius: 5px; padding-left: 15px; text-align: left; padding: 10px; background-color: #fff; box-sizing: border-box; overflow: hidden; font-size: 18px; }
Дополнительно:
вот вариант https://jsfiddle.net/qvm2strp/, стили уже на ваше усмотрение.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Для того чтобы расположить текст под картинкой на веб-странице, можно воспользоваться различными методами стилизации и размещения элементов. Один из способов - использовать CSS для создания контейнера, в котором будут находиться изображение и текст.
Пример кода на языке HTML и CSS:
<div class="image-container"> <img src="image.jpg" alt="Изображение"> <p>Текст, который будет расположен под картинкой.</p> </div> |
<div class="image-container"> <img src="image.jpg" alt="Изображение"> <p>Текст, который будет расположен под картинкой.</p> </div>
.image-container { display: flex; flex-direction: column; align-items: center; } img { width: 100%; height: auto; } |
.image-container { display: flex; flex-direction: column; align-items: center; } img { width: 100%; height: auto; }
В данном примере мы создаем контейнер с классом "image-container", внутри которого располагается изображение и текст. С помощью CSS свойства "display: flex" мы задаем блочный контейнер с гибкими элементами, которые будут располагаться внутри него в столбик. Свойство "align-items: center" центрирует элементы по вертикали.
Изображение занимает всю доступную ширину контейнера, а высота рассчитывается автоматически для сохранения пропорций. Текст будет располагаться под изображением.
Это лишь один из способов расположения текста под картинкой на веб-странице. Можно также использовать другие методы позиционирования и стилизации элементов, в зависимости от дизайна и требований вашего проекта.
Для расположения текста под картинкой на веб-странице можно использовать различные методы CSS. Один из способов - использовать свойство display для элементов.
Пример кода на HTML:
```html
Текст под картинкой
```
Пример CSS:
```css
.container {
position: relative;
}
.container img {
display: block;
}
.container p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
}
```
В данном примере мы создаем контейнер с изображением и абзацем текста. Устанавливаем позицию контейнера как относительную, чтобы позиционировать текст относительно него. Изображение устанавливаем как блочный элемент, чтобы текст располагался под ним. Далее, позиционируем текст абсолютно относительно контейнера и устанавливаем его внизу, слева, с заданными стилями для фона, цвета и отступов.
Таким образом, текст будет расположен под картинкой и будет иметь стилизацию, указанную в CSS.