title: Centering components in a Layout
body: <p>I'm trying to center a picture and a label into a Vertical layout so here's the code i wrote: </p>
  
  <pre><code>    picture = new Embedded(null,  BrandableResourceHelper.getInstance().newResource("image/icon.png"));
      lab = new Label();
      lab.setWidth(100, UNITS_PERCENTAGE);
  
      VerticalLayout col = new VerticalLayout();
      col.addComponent(picture);
      col.addComponent(lab);
      col.setWidth(30, UNITS_PERCENTAGE);
      col.setComponentAlignment(picture, Alignment.MIDDLE_CENTER);
      col.setComponentAlignment(lab, Alignment.MIDDLE_CENTER);
  </code></pre>
  
  <p>Here's what i wanna get: </p>
  
  <p><a href="https://i.stack.imgur.com/UbIqA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UbIqA.png" alt="enter image description here"></a></p>
  
  <p>Here's what i'm getting:</p>
  
  <p><a href="https://i.stack.imgur.com/tAYtJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tAYtJ.png" alt="enter image description here"></a></p>