Bixby Developer Center

Vertical alignment. Determines the vertical alignment of the components in a vbox.

You can choose from these options:

• Top
• Bottom
• Middle
• Baseline

Example

If you have a single vbox, it might be difficult to visualize the different alignments. Below is an example of an hbox with various vbox keys that might help you picture the different options relative to each other.

Here is the example code:

hbox {
  content {
    vbox {
      content {
        text { value (one)   style (Detail_M) }
        text { value (two)   style (Detail_M) }
        text { value (three) style (Detail_M) }
        text { value (four)  style (Detail_M) }
      }
    }
    vbox {
      valign (Top)
      content {
        text { value (top)      style (Detail_M) }
        text { value (valigned) style (Detail_M) }
      }
    }
    vbox {
      valign (Middle)
      content {
        text { value (middle)   style (Detail_M) }
        text { value (valigned) style (Detail_M) }
      }
    }
    vbox {
      valign (Bottom)
      content {
        text { value (bottom)   style (Detail_M) }
        text { value (valigned) style (Detail_M) }
      }
    }
  }
}