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



  • 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?



  • 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!



  • 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?



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

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


  • 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…



  • 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 :)



  • Thank you a47ae!

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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.