Блог

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

Поместите текст под изображением

#html #css

Вопрос:

Я новичок в CSS и хочу разместить текст под изображением со ссылкой, поэтому я делаю некоторые базовые html и css-вещи, такие как:

 .programs_content {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  padding: 20px;
}

.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
}

.rect-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caption {
  display: block;
} 
    <div class="programs_content">
              <div class="rect-img-container">
                <a href="#">
                  <img class="rect-img" src="1.png" alt="" />
                </a>
              </div>
              <span class="caption">text1</span>

              <div class="rect-img-container">
                <a href="#">
                  <img class="rect-img" src="2.png" alt="" />
                </a>
              </div>
              <span class="caption">text2</span>
              
              <div class="rect-img-container">
                <a href="#">
                  <img class="rect-img" src="3.png" alt="" />
                </a>
              </div>
              <span class="caption">text3</span>
              
              <div class="rect-img-container">
                <a href="#">
                  <img class="rect-img" src="4.png" alt="" />
                </a>
              </div>
              <span class="caption">text4</span>
              
            </div>

Но текст всегда находится рядом с изображением, я пытаюсь отобразить блок текста и изображения с помощью встроенного блока, но это не сработало.

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

1. Вы используете слишком много CSS. Я бы рекомендовал использовать меньше и не усложнять ситуацию. Начните с HTML, который я опубликовал ниже, и я бы перезапустил ваш CSS.

Ответ №1:

Для подписей вам лучше всего использовать подписи, встроенные в HTML. Ознакомьтесь с более подробной информацией здесь, но вот пример HTML:

 <figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Ответ №2:

     <style>
.programs_content {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  padding: 20px;
}

.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
}

.rect-img {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caption {
  display: block;
}
  </style>
<div class="programs_content">
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="1.png" alt="" />
    </a>
    <span class="caption">text1</span>
  </div>
  

  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="2.png" alt="" />
    </a>
    <span class="caption">text2</span>
  </div>
  
  
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="3.png" alt="" />
    </a>
    <span class="caption">text3</span>
  </div>
  
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="4.png" alt="" />
    </a>
    <span class="caption">text4</span>
  </div>
  
</div>
Метки: