html - 如何将文本对齐到输入字段的中间？

Question

我正在尝试将 span 标记 中的文本与 输入字段 的中心对齐。但是当我在我的 css 中使用 "text-align": center 时，它不起作用。

当我将span 标签 更改为paragraph 标签 时，我的输入字段 变大了。

代码:

<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>

当我添加 paragraph 标签 时，它看起来像这样:

使用 span 标签:

回答我的问题:

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

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

非常感谢您的投入。

谢谢

Answer 1

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>