html - Align text below image perfectly in spotlight grid layout - Stack Overflow

admin管理员组

文章数量:1334936

I'm trying to align the name (h3) and description (p) text perfectly below an image in a spotlight gallery. Despite several adjustments, I can't seem to make the text align directly with the left edge of the image.

Things I've tried:

1. Set align-items: flex-start on .spotlight-item and .spotlight-item-big.

2. Removed padding-left and margin-left from .spotlight-info, h3, and p to avoid extra space.

3. Set box-sizing: border-box to include padding in width calculations.

   and picture i attached are latest results.

/* Spotlight Grid */

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 10px;
  max-width: 60%;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 40px;
}


/* Spotlight Item (Big and Small) */

.spotlight-item-big,
.spotlight-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* To align items to the left */
  box-sizing: border-box;
  width: 100%;
  height: auto;
}


/* Spotlight Info */

.spotlight-info {
  padding-top: 10px;
  text-align: left;
  width: 100%;
  padding-left: 0;
  margin-left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}


/* Spotlight Info Headings */

.spotlight-info h3 {
  font-size: 25px;
  margin-bottom: 4px;
  font-weight: bold;
  font-family: 'Playfair Display', serif;
  text-align: left;
  margin-left: 0;
}


/* Spotlight Info Paragraphs */

.spotlight-info p {
  margin: 2px 0;
  font-size: 14px;
  color: #ffffff;
  font-family: 'Poppins', serif;
  text-align: left;
  margin-left: 0;
}

<!-- Monthly Spotlight Section -->

<section id="monthly-spotlight" class="spotlight-section">
  <div class="spotlight-image-container">
    <img src="image/ms.png" alt="Monthly Spotlight Image">
  </div>

  <div class="spotlight-grid">
    <!-- Top 3 artworks (rank 1-3) items -->
    <div class="spotlight-item spotlight-item-big">
      <img src="image/mona_lisa.jpg" alt="Mona Lisa">
      <div class="spotlight-info">
        <h3>Mona Lisa</h3>
        <p>Artist: Leonardo</p>
        <p>Year: 1503</p>
        <p>Medium: Portrait</p>
      </div>
    </div>
    <div class="spotlight-item spotlight-item-big">
      <img src="image/guernica.jpg" alt="Guernica">
      <div class="spotlight-info">
        <h3>Guernica</h3>
        <p>Artist: Picasso</p>
        <p>Year: 1937</p>
        <p>Medium: Abstract</p>
      </div>
    </div>
    <div class="spotlight-item spotlight-item-big">
      <img src="image/persistence_of_memory.jpg" alt="The Persistence of Memory">
      <div class="spotlight-info">
        <h3>The Persistence of Memory</h3>
        <p>Artist: Matisse</p>
        <p>Year: 1931</p>
        <p>Medium: Surrealism</p>
      </div>
    </div>
  </div>

  <div class="spotlight-grid-rank-4-7">
    <!-- Next 4 artworks (rank 4-7) items -->
    <div class="spotlight-item">
      <img src="image/birth_of_venus.jpg" alt="The Birth of Venus">
      <div class="spotlight-info">
        <h3>The Birth of Venus</h3>
        <p>Artist: Rembrandt</p>
        <p>Year: 1486</p>
        <p>Medium: Renaissance</p>
      </div>
    </div>
    <div class="spotlight-item">
      <img src="image/water_lilies.jpg" alt="Water Lilies">
      <div class="spotlight-info">
        <h3>Water Lilies</h3>
        <p>Artist: Warhol</p>
        <p>Year: 1919</p>
        <p>Medium: Impressionism</p>
      </div>
    </div>
    <div class="spotlight-item">
      <img src="image/starry_night.jpg" alt="Starry Night">
      <div class="spotlight-info">
        <h3>Starry Night</h3>
        <p>Artist: Vincent van Gogh</p>
        <p>Year: 1889</p>
        <p>Medium: Landscape</p>
      </div>
    </div>
    <div class="spotlight-item">
      <img src="image/last_supper.jpg" alt="The Last Supper">
      <div class="spotlight-info">
        <h3>The Last Supper</h3>
        <p>Artist: Leonardo</p>
        <p>Year: 1498</p>
        <p>Medium: Religious</p>
      </div>
    </div>
  </div>

  <div class="spotlight-image-container-bgms img">
    <img src="image/bgms.png" alt="Monthly Spotlight Image">
  </div>
</section>

本文标签： htmlAlign text below image perfectly in spotlight grid layoutStack Overflow