Nativescript vertical alignment in GridLayout not working
<p>In nativescript I have some problem with StackLayout which is in a GridLayout. I cannot align the Label in StackLayout center vertical.</p>

<p>Here is a picture what I would like to achive:</p>

<p><a href="https://i.stack.imgur.com/bqGZO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bqGZO.png" alt="enter image description here"></a> </p>

<p>Here you can see, that I want the exclamation icon center vertically.</p>

<p>But unfortunately I keep getting this:</p>

<p><a href="https://i.stack.imgur.com/E8jF1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/E8jF1.png" alt="enter image description here"></a></p>

<p>Here is the code I use:</p>

<p>tns.html</p>

<pre><code>&lt;GridLayout class="formMessage warning" columns="auto,*" rows="auto"&gt;
  &lt;StackLayout col="0" class="formMessageIcon"&gt;
    &lt;Label class="icon fa" [text]="'fa-exclamation-circle' | fonticon"&gt;&lt;/Label&gt;
  &lt;/StackLayout&gt;
  &lt;Label col="1" class="formMessageText" text="lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet" textWrap="true"&gt;&lt;/Label&gt;
&lt;/GridLayout&gt;
</code></pre>

<p>CSS</p>

<pre><code>.formMessage {
  width: 100%;
  border-width: 2;
  border-color: #ff344e;
}

.formMessageIcon {
  background-color: #ff344e;
  width: 30;
}

.icon {
  vertical-align: center;
  text-align: center;
  margin-right: 2;
  font-size: 18;
  color: #2b3535;
}

.formMessageText {
  padding: 5 8;
  color: #ff344e;
}
</code></pre>

<p>How can I fix the icon centering? What I am doing wrong? Thank you very much!</p>