Блог

Главная - Вопросы по программированию - как сделать контейнер с изображением и подписью

как сделать контейнер с изображением и подписью

#html #css #image

Вопрос:

как мне сделать такой контейнер? 1

Я попробовал эту кнопку, в подписи вверху и внизу есть пробелы

 .container {
border: 2px solid black;
}
.container img {
display: block;
margin-left: auto;
margin-right: auto;
width: 65%;
}
.container div {
width: 100%;
border-bottom: 2px solid black;
padding-bottom: 1px;
} 
 <div class="container"><img src="https://i.stack.imgur.com/KTKb6.png"><div></div><p>caption here</p></div>

есть ли в любом случае возможность удалить пробелы?

Комментарии:

1. Что вы пробовали до сих пор? Где ты застрял? Обычно удаление «пробелов» кажется вполне возможным с помощью CSS

2. p имеет поля по умолчанию, исходящие из таблицы стилей агента пользователя, поэтому вам нужно будет явно их перезаписать. Но вы должны в первую очередь использовать правильные элементы, которые предоставляет HTML для подобных вещей — developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

3. Я использовал маржу сверху: 0; и маржу снизу: 0; теперь это работает так, как я хотел

Ответ №1:

Вы можете использовать элементы <figure> и <figcaption> для этого следующим образом (что , кстати, также является предпочтительным методом с точки зрения доступности, поскольку эти теги являются стандартом для изображений с подписями).:

 .x {
  width: 500px;
  text-align: center;
  border: 1px solid #555;
}

.x img {
  vertical-align: top;
}

.x figcaption {
  border-top: 1px solid #555
} 
 <figure class="x">
  <img src="https://picsum.photos/300/200" />
  <figcaption>This is the caption</figcaption>
</figure>

(Примечание: vertical-align: top; на изображении не должно быть места над/под ним)

Ответ №2:

Это то, что вы ищете?

 *{
    box-sizing: border-box;
}
.container{
    width: 50%;
    border: 10px solid black;
    justify-content: center;
    flex-direction: column;
}
.image > img{
    width: 100%;
    vertical-align: middle;
}
.caption{
    display: flex;
    justify-content: center;
    border-top: 10px solid black;
} 
 <div class="container">
    <div class="image"><img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" alt=""></div>
    <div class="caption"><h2>CAPTION HERE</h2></div>
</div>
Метки: