如何以“类星体方式”居中输入答案

【问题标题】：How to center input in "quasar way"如何以“类星体方式”居中输入
【发布时间】：2020-03-12 06:36:02
【问题描述】：

我开始使用 quasar，我希望输入居中但以 quasar 方式（使用 quasar 可用的类、组件和指令）。我不想用 !important 强制风格。这是代码笔https://codepen.io/luckylooke11/pen/RwwqJex

<div id="q-app">
  <q-layout>
    <q-page-container>
    <q-page class="home-page q-gutter-lg">
    <div class="row justify-center q-pa-md">
      <div class="col-auto">
        <img alt="My image" class="image" src="../assets/images/image.png" />
      </div>
      <div class="col-12 text-center self-center">
        <h2>My gooogle search</h2>
        <q-input outlined square v-model="text" class="input self-center" placeholder="my centered input">
          <template v-slot:append>

            <q-icon v-if="text !== ''" name="close" @click="text = ''" class="cursor-pointer"></q-icon>
            <q-icon v-else name="search"></q-icon>
          </template>
        </q-input>
      </div>
    </div>
  </q-page>
    </q-page-container>
    </q-layout>
</div>

感谢您的任何提示。

【问题讨论】：

标签： quasar-framework

【解决方案1】：

将此类应用于 q-page 并删除您的输入类：window-height window-width row justify-center items-center

row 将 display 属性设置为 flex, justify-center centers 水平，items-center 垂直居中。

请参考这个codepen。

https://codepen.io/Pratik__007/pen/oNNQMJP?editors=1010

【讨论】：

谢谢你，更好和“类星体方式”??
看起来这个解决方案不起作用（不再？）通过将 style="border:1px solid red" 添加到它显示它与列的左侧对齐的元素

【解决方案2】：

我可能以不那么类星体的方式来，但使用display: inline-block;也许可以接受

  .input {
    width: 100%;
    max-width: 40rem;
    display: inline-block;
  }

https://codepen.io/luckylooke11/pen/GRRwBRB

【讨论】：