Измененный входной элемент не будет центрировать

Maurice спросил: 12 мая 2018 в 05:14 в: html

Я использую primeNG, и я сделал с ним группу ввода. Это поле ввода должно быть перемещено в центр, и я знаю, что для этого я должен использовать text-align: center на контейнере обертывания. Однако, когда я делаю это, группа ввода все еще не будет двигаться вправо, я действительно не знаю, что вызывает это. Это мой код:

css

.middle {
    text-align: center;
}

html

    <div class="middle ui-inputgroup">
      <input type="text" size="5" pInputText placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div>

ui-inputgroup - это родной класс of primeNG, больше информации здесь: https://www.primefaces.org/primeng/#/inputgroup

Каким образом кто-нибудь расскажет, что происходит?

EDIT: ваш код вызывает кнопку ниже входа для поплавка рядом с входом вместо центрирования кнопки. Это ваш реализованный код плюс html-код кнопки:

  <div class="ui-g-12 ui-md-4 test">
    <div class="middle ui-inputgroup">
      <input type="text" size="5" pInputText placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div>
  </div>

<button mat-raised-button id="newFilter" (click)="showDialog()">Add new filter</button>
</div>

выглядит так:

1 ответ

fateme fazli ответил: 12 мая 2018 в 05:59

text-align of middle уже находится в центре,

<div class="ui-g-12 ui-md-4 test">
    <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">
           <i class="fa fa-user"></i>
        </span>
        <input pinputtext="" placeholder="Username" 
    type="text" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
    </div>
</div>

style:

.ui-g-12.ui-md-4.test {
    margin: 0 auto;
}input.ui-inputtext.ui-corner-all.ui-state-default.ui-widget {
    text-align: center;
}

update

<div class="ui-g-12 ui-md-6 test" style="margin: 0 auto;">
    <div class="middle ui-inputgroup" style="display: inline-flex;">
      <input type="text" size="5" pinputtext="" placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div>
    <button id="newFilter">Add new filter</button>
</div>

Maurice ответил: 12 мая 2018 в 05:45

ваш код не работает, см. мое редактирование

fateme fazli ответил: 12 мая 2018 в 06:00

@Maurice у меня нет вашего кода, чтобы делать то, что вы хотите, но обновляете, надеюсь, что это поможет.

Maurice ответил: 12 мая 2018 в 06:17

Это те, которые больше сосредоточены, но все еще немного вправо, я использовал margin-right: 84px; сделать трюк. Однако я ценю ваши усилия. спасибо