Question

我正在尝试将span tag中的文本对齐到input field的中心。但是，当我在CSS中使用"text-align": center时，它不起作用。

当我将span tag更改为paragraph tag时，我的input field变大了。

代码：

<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 tag时，它看起来像这样：

使用span tag：

回答我的问题：

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

Answer 2

将此样式=“ text-align：center”添加到您的输入元素中，像这样

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

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

2 个答案: