Как не дать Squashed тексту под изображениями из Pure Grid Div

Question

Я использую CSS-класс с чистой сеткой, чтобы создать сетку изображений и размещаю текстовую метку под каждым.Однако это не работает, потому что текст становится сжатым (см. Изображение ниже):

Вот мой код:

  <div class="pure-g" style="margin-top:90px; margin-left:200px">

      <div class="pure-u-lg-1-4 pure-u-md-1-2 pure-u-sm-1" style="margin-right:50px">
          <a href="#" class="thumbnail">
            <img src="sample_image.jpg" width=200px>
            <center>
              <span class="caption" style="color:black" > <br> My Text Under Image</span>
          </center>
        <br>
      </div>

Answer 1

Включаете ли вы необходимый файл CSS для чистых адаптивных сеток ?

В вашем коде отсутствовал конец для тегов a и div.Все работает после закрытия этих тегов:

<link href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" rel="stylesheet"/>
<link href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css" rel="stylesheet"/>

<div class="pure-g" style="margin-top:90px; margin-left:200px">
  <div class="pure-u-lg-1-4 pure-u-md-1-2 pure-u-sm-1" style="margin-right:50px">
    <a href="#" class="thumbnail">
            <img src="sample_image.jpg" width=200px>
            <center>
              <span class="caption" style="color:black" > <br> My Text Under Image</span>
          </center>
        <br>
        </a>
  </div>
</div>