How to align text to middle of the input filed?

Question

I am trying to align my text in the span tag to center of the input field. But when i used the "text-align": center in my css, it is not working.

When i changed the span tag to paragraph tag my input field become big.

the code:

<div class="nxui-form-group">
    <label for="external-realisation">
      <img src="assets/images/purchase_order.svg" class="nxui-icon-small nxui-icon-align-bottom">
      {{ 'i18n.all-damage-reports.label.external-realisation' | translate }}
    </label>
    <div *ngIf="!isExternal">
      {{ 'i18n.all-damage-reports.label.without-order' | translate }}
    </div>
    <div *ngIf="isExternal" class="nxui-label-plus-field">
      <span class="nxui-non-breakable-label">{{ 'i18n.all-damage-reports.label.with-order' | translate }}&nbsp;</span>
      <input [nxuiPlaceholder]="'i18n.all-damage-reports.label.external-realisation' | translate"
             [title]="'i18n.all-damage-reports.label.external-realisation' | translate"
             class="nxui-form-control"
             formControlName="company"
             id="external-realisation"
             pInputText
             >
    </div>
  </div>

It looks like this when i added the paragraph tag:

With span tag:

Answer to my question:

.nxui-label-plus-field {
  display: flex;
  align-items: center;
}

.nxui-non-breakable-label {
  white-space:nowrap ;
}

highly appreciated for the inputs.

Thanks

if you use the text-align css property but it doesn't come through, something else is blocking it. It should be all you need. F12 through your page's css and find out why it isn't taking. — Wim Ombelets, Feb 20 '19 at 12:53
@TheParam it aligns the text inside the input field, i need the text outside the field. — Praveenkumar Beedanal, Feb 20 '19 at 12:54
@PraveenkumarBeedanal As per your question, I think your expectation is span should be vertically middle of input field right ? Basically, your expectation of alignment should be similar to p tag right ? — Sheeban Singaram, Feb 20 '19 at 13:01
@PraveenkumarBeedanal okay! you can use display flex/grid properties, in your parent class "nxui-label-plus-field" and align the items center. Let me know you need code snippet, I will post the answer. — Sheeban Singaram, Feb 20 '19 at 13:07
@SheebanSingaram it would be great, if you post tge snippet. — Praveenkumar Beedanal, Feb 20 '19 at 13:08
Will do! mean time take a look of this post. https://stackoverflow.com/questions/22429003/how-to-right-align-flex-item it would be helpful to slove your problem. — Sheeban Singaram, Feb 20 '19 at 13:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188756/discussion-between-sheeban-singaram-and-praveenkumar-beedanal). — Sheeban Singaram, Feb 20 '19 at 13:15

Sheeban Singaram · Accepted Answer · 2019-02-20T13:46:22.117

HTML:

<div *ngIf="isExternal" class="nxui-label-plus-field">
  <span class="nxui-non-breakable-label">{{ 'i18n.all-damage-reports.label.with-order' | translate }}&nbsp;</span>
  <input [nxuiPlaceholder]="'i18n.all-damage-reports.label.external-realisation' | translate"
         [title]="'i18n.all-damage-reports.label.external-realisation' | translate"
         class="nxui-form-control"
         formControlName="company"
         id="external-realisation"
         pInputText
         >
</div>

CSS:

<style>
   .nxui-label-plus-field { 
      display: flex;
      align-items: center;
    }
</style>

score 0 · Answer 2 · answered Feb 20 '19 at 12:54

add this style="text-align:center" to you input element to be like that

 <input [nxuiPlaceholder]="'i18n.all-damage-reports.label.external-realisation' | translate"
             [title]="'i18n.all-damage-reports.label.external-realisation' | translate"
             class="nxui-form-control"
             formControlName="company"
             id="external-realisation"
             pInputText
             style="text-align:center"
             >

How to align text to middle of the input filed?

2 Answers2