How to vertically centering a single line or component? (SOLVED!)

MagoSchmidt

Hi All!

This is my first attempt to build a Quasar app. I’m trying to build a very simple form but I was unable to vertically center my inputs at screen. I tried the following in my Login.vue file:

<div class="justify-center full-height full-width text-center">
   <div class="floating-label">
      <q-select label='Selecione a unidade' v-model="value" :options="options">
      </q-select>
    </div>
    <button class="primary round">Ok</button>
</div>

Anybody knows why this “justify-center full-height” does not work as expected?

a47ae

Use the Quasar flexbox helper: http://beta.quasar-framework.org/components/flex-css.html

You are using justify-center without applying the row class, so the div probably does not use display: flex
So try doing it like this:

<div class="row justify-center full-height full-width text-center">
   <div class="floating-label">
      <q-select label='Selecione a unidade' v-model="value" :options="options"></q-select>
   </div>
   <button class="primary round">Ok</button>
</div>

Protip: Wrap your code block by three backticks ``` at the end and beginning to format it more nicely!

MagoSchmidt

I really appreciate your quick answer (and protip!). Thank you very much!

Unfortunately, I’m quite frustrated after read a lot of docs and forum posts about Flexbox. I’m completely unable to vertically center a single line on screen!

Even something as simple as

<template>
  <div class="row full-height justify-center">
    <div>This line should be vertically centered???</div>
  </div>
</template>

does not work!

I’m using quasar 0.14. Am I missing something?

a47ae

Oh my bad, I read your initial post too quick, justify-center is for horizontally centering, you have to use items-center

<div class="row items-center" style="height: 200px">
     <div>I am vertically centered</div>
</div>

MagoSchmidt

Thank you again a47ae!

Unfortunately, I was looking for a way to vertically center a line WITHOUT “hardcode” the height! 200px may be reasonable height on a mobile but it is not on a PC browser!

I am starting to think that vertically center something is a huge CSS problem and quasar or flex has no way to help

Or perhaps I am trying to solve the wrong problem: Originally I was looking for a way to center a login form into screen (with two inputs (username and password) and a button. Is this idea basically wrong?

I tried to use CARDs and DIALOGs. Dialogs closes after an ESC press and CARDs I was also unable to center…

a47ae

Oh, the hard coded height is only there to visualize the centering. Normally a div only has the height it needs. Even if you give it the full-height class, it only sets the height to 100% of the parent div. So to have an element centered vertically (at least to be able to see a vertical center), the element must have a higher height than the auto calculated, which should make sense and is not an issue with CSS but how the box model works. Go ahead and inspect the height of the elements in your example and you will notice, that they are exactly the height they need.

If you want centered login form, try this snippet:

<div class="window-height window-width row justify-center items-center">
    <q-card>
      <q-card-title>Login</q-card-title>
      <q-card-main>
        <form>
          <q-field>
            <q-input v-model="email" type="email" float-label="E-Mail" required></q-input>
          </q-field>

          <q-field>
            <q-input v-model="password" type="password" float-label="Password" required></q-input>
          </q-field>
        </form>
      </q-card-main>

      <q-card-separator/>

      <q-card-actions>
        <q-btn @click="login" type="submit">Login</q-btn>
      </q-card-actions>
    </q-card>
  </div>

The interesting part is the classes applied to the wrapping div: 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.

But in order to work, we need a height for the element. This is where window-height comes in. It sets the height of the div to 100vh which stands for the whole viewport height. This would not work if there was something other displayed, like a top bar, because then you would have a scroll bar, or had to do something like this: height: calc(100vh-$top-bar-height). window-width on the other hand is not really needed because each element which has display: block automatically spans the full available width.

I hope this illustrates why you need to set a height and solves your problem

MagoSchmidt

Thank you a47ae!

It works like a charm! Thank you very much for so detailed and clear explanation!

cheebhodh

Awosome, thank you dude

paul

@a47ae Very nice, the variable $top-bar-height is that something that is available automatically?

No More Posting New Topics!

How to vertically centering a single line or component? (SOLVED!)