title: Display text and image inside 'div'
body: <p>I am trying to display an image inside a div and text below the image. If I set image property float: left, the text is displayed in the same line. I want to display the text in the next line in the center. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.group1 {
    border: 2px solid black;
    width: 180px;
    height: 180px;
    text-align: center;
    display: inline-block;
    font-family: "Open Sans";
  }
  .title {
    font-size: 14px;
  }
  img {
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='group1'&gt;
    &lt;p&gt; &lt;span&gt; &lt;img src='img1.png'&gt; &lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt; &lt;span class='title'&gt; First &lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt; &lt;span&gt; second &lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to display the text 'First' in the next line in the center?
  The image should be present in the left side of the div</p>