I started using quasar and I would like to have input centered but in a quasar way (using quasar available classes, components and directives). I do not want to force style with.important. Here is codepen 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>
Thank you for any hint.
Apply this classes to q-page and remove your input class: window-height window-width row justify-center items-center
row
sets the display property to flex, justify-center centers
it horizontally and items-center
centers it vertically.
Please refer this codepen.
I came with not so quasar way probably, but maybe acceptable by using display: inline-block;
.input {
width: 100%;
max-width: 40rem;
display: inline-block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.