How can I centralize <nb-select> control

I'm using Nebular Template.

I'm trying to use <nb-select>.

I couldn't centralize the control, once it as been inside another tag, <div class="input-group">, for example.

How could I centralize the <nb-select>, and how could I set 100% of width of this control, and the change has been visible at the control?

          <div class="input-group">
              <nb-select selected="0">
                <nb-option value="1">Verint Speech</nb-option>
                <nb-option value="2">Nice IA</nb-option>
              </nb-select>
            </div>

Solution

How could I centralize the

According to code from the question you have nb-select inside div with input-group class. To center nb-select inside div add following CSS to your component:

.input-group {
  display: flex;
  justify-content: center;
}

how could I set 100% of width of this control

You can set fullWidth input of nb-select.

<nb-select fullWidth>
...
</nb-select>

See the docs for details