title: HTML&CSS center items
body: <p>I have <a href="https://i.stack.imgur.com/plpjq.png" rel="nofollow noreferrer">this box</a> that I want to display on a web page through HTML&amp;CSS.
  But I can't manage to place the white boxes inside the blue one. Any help is appreciated.
  The CSS I put is just so I can see the borders of the elements.
  <a href="https://i.stack.imgur.com/yI841.png" rel="nofollow noreferrer">I want it to look like this</a></p>
  <pre><code>&lt;div class=&quot;table&quot;&gt;
  &lt;h1 class = &quot;title&quot;&gt;Data Manipulation Language&lt;/h1&gt;
      &lt;ul class=&quot;content&quot;&gt;
          
          &lt;li class = &quot;update&quot;&gt;
              &lt;p&gt;UPDATE&lt;/p&gt;
              &lt;p&gt; UPDATE MyTable&lt;/p&gt;
              &lt;p&gt;SET col1 = 56&lt;/p&gt;
              &lt;p&gt;WHERE col2 = 'something';&lt;/p&gt;
          &lt;/li&gt;
          
          &lt;li class=&quot;insert&quot; &gt;
              &lt;p&gt;INSERT&lt;p&gt;
              &lt;p&gt;INSERT INTO MyTable(col1, col 2)&lt;/p&gt;
              &lt;p&gt;VALUES ('value1', 'value2');&lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
          &lt;/li&gt;
          
          &lt;li class=&quot;delete&quot;&gt;     
              &lt;p&gt;DELETE&lt;/p&gt;
              &lt;p&gt;DELETE FROM MyTable&lt;/p&gt;
              &lt;p&gt;WHERE col1 = 'something';&lt;/p&gt;
              &lt;p&gt;&lt;/p&gt; 
          &lt;/li&gt;
          
          &lt;li class=&quot;select&quot;&gt;     
              &lt;p&gt;SELECT&lt;/p&gt;
              &lt;p&gt;SELECT col1, col2&lt;/p&gt;
              &lt;p&gt;FROM MyTable;&lt;/p&gt;
              &lt;p&gt;&lt;/p&gt;
          &lt;/li&gt;
      
      &lt;/ul&gt;
      
  &lt;/div&gt;
  </code></pre>
  <pre><code>.update/.delete/.insert/.select(the classes of the white boxes) {
      background-color: #FFFFFF;
      left: auto;
      float: left;
      text-align: left;
      font-family: Gotham, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
      line-height: 5px;
      padding:10px;
      border: 6px solid #FF0004;
      border-width: 5;
  }
  
  </code></pre>